/* ===== TOPBAR — contact strip above the nav =====
   The brief asks for phone, mail and WhatsApp "en la parte superior". A slim
   strip keeps them permanently reachable without competing with the nav's own
   CTA, and it scrolls away (only the nav itself is fixed) so the header stays
   compact once you're reading. */

.topbar {
  background: var(--night-deep);
  color: rgba(255,255,255,0.95);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.55rem var(--pad) 0.6rem;
  min-height: var(--topbar-h);
  line-height: 1.5;
}
.topbar-links { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topbar a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: rgba(255,255,255,0.95);
  transition: color 240ms var(--ease);
}
.topbar a:hover { color: var(--wheat); }
.topbar svg { flex: none; opacity: 0.9; }
/* The promo line is the reason the strip exists, so it gets the palette's
   warmest colour and a live dot, not the same dim grey as the contact links. */
.topbar-tag {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  color: var(--wheat);
  letter-spacing: 0.01em;
}
.topbar-tag strong { font-weight: 600; color: var(--wheat); }
.topbar-tag .tag-pre {
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: #ffffff;
}
.tag-dot {
  align-self: center;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sky); flex: none;
  box-shadow: 0 0 0 0 rgba(204,167,112,0.65);
  animation: tagPulse 2.6s var(--ease) infinite;
}
@keyframes tagPulse {
  0%   { box-shadow: 0 0 0 0 rgba(204,167,112,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(204,167,112,0); }
  100% { box-shadow: 0 0 0 0 rgba(204,167,112,0); }
}
@media (prefers-reduced-motion: reduce) { .tag-dot { animation: none; } }

/* ===== EXTRAS — "contamos con" =====
   Three named groups, each a plain wrapped list. 23 activities as 23 cards
   would be noise; grouped text lets someone scan for the one they want. */

.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
/* Every photo we hold of people is portrait, so a wide box throws away half the
   frame and takes the head with it. The box is a little taller than 16:10 to
   claw some of that back, and any image whose subject is not centred carries an
   inline object-position naming its focal point. */
.extra-img {
  overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 1.2rem;
  background: var(--paper);
}
.extra-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
.extra-group:hover .extra-img img { transform: scale(1.04); }
.extra-group h3 {
  padding-bottom: 0.8rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.extra-group ul { display: flex; flex-direction: column; gap: 0.62rem; }
/* A dash per line: the items are short phrases and without a marker the column
   reads as one run-on block, especially where an entry wraps to two lines. */
.extra-group li {
  position: relative; padding-left: 1.1rem;
  font-size: 0.95rem; color: var(--muted); line-height: 1.45;
}
.extra-group li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 8px; height: 1px; background: var(--sky-deep);
}
.extra-group li span { color: var(--accent-text); font-size: 0.82rem; }

/* ===== DATE RANGE PICKER ===== */

.dp-host { position: relative; }
.dp-input { cursor: pointer; }

.dp {
  position: absolute; top: calc(100% + 0.6rem); left: 0; z-index: 60;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(13, 32, 71, 0.14);
  padding: 1rem 1.1rem 0.9rem;
  min-width: 300px;
}
.dp[hidden] { display: none; }

.dp-head { display: flex; justify-content: space-between; margin-bottom: 0.2rem; }
.dp-nav {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--night); background: transparent;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease),
              color 200ms var(--ease), opacity 200ms var(--ease);
}
.dp-nav:hover { border-color: var(--night); background: var(--night); color: var(--white); }
.dp-nav[disabled] { opacity: 0.3; pointer-events: none; }

.dp-months { display: flex; gap: 1.6rem; }
.dp-month { flex: 1 0 auto; }
.dp-mname {
  font-size: 0.85rem; font-weight: 600; color: var(--night);
  text-align: center; margin: 0.1rem 0 0.7rem;
}
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-dow span {
  font-size: 0.68rem; font-weight: 600; color: var(--muted);
  text-align: center; padding-bottom: 0.35rem; text-transform: uppercase;
}
.dp-pad { display: block; }

.dp-day {
  aspect-ratio: 1; min-width: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; color: var(--ink); background: transparent;
  border: none; border-radius: 0; position: relative;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.dp-day:hover:not([disabled]) { background: rgba(21,52,102,0.08); }
.dp-day.is-past { color: var(--line); pointer-events: none; }
/* the band between the two ends, so a range reads as one run and not as two
   unrelated marks */
.dp-day.is-in { background: rgba(204,167,112,0.18); }
.dp-day.is-edge { background: var(--night); color: var(--white); font-weight: 600; }
.dp-day.is-start { border-radius: 2px 0 0 2px; }
.dp-day.is-end { border-radius: 0 2px 2px 0; }
.dp-day:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: -2px; }

.dp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 0.8rem; padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
.dp-clear {
  font-size: 0.82rem; color: var(--muted); background: transparent; border: none;
  text-decoration: underline; text-underline-offset: 3px;
}
.dp-clear:hover { color: var(--accent-text); }

@media (max-width: 699px) {
  /* one month, and pinned to the row rather than the input, so a 2-month grid
     never forces the panel off the side of a phone */
  .dp { left: 0; right: 0; min-width: 0; }
  .dp-months { gap: 0; }
  .dp-day { min-width: 0; font-size: 0.92rem; }
}

/* ===== REQUEST BANNER — arriving at /contacto with a ?tour= already picked =====
   Wheat, not the green/red of the post-submit success state: this isn't a
   result, it's confirming what's about to be sent, before the visitor has
   typed anything. */

.req-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.8rem;
  background: rgba(204,167,112,0.14);
  border: 1px solid var(--sky);
}
/* The component styles set a display mode, which otherwise overrides the
   browser's [hidden] rule. Keep both request elements out of the layout until
   a tour, program or interest has actually been selected. */
.req-banner[hidden], .req-preview[hidden], .req-empty[hidden] { display: none; }
.req-banner p { font-size: 0.92rem; color: var(--ink); }
.req-banner strong { color: var(--night); font-weight: 600; }
.req-banner button {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px;
  flex: none;
  min-height: 32px; padding: 0.3rem 0; display: inline-flex; align-items: center;
}
.req-banner button:hover { color: var(--night); }

/* ===== ENQUIRY FORM — full width, one question per row =====
   Each row is label + control with a rule underneath, so the questions read as
   a list in order. The earlier two-column grid of floating underlines gave no
   reading order and nothing to separate one question from the next. */

.qform { border-top: 1px solid var(--line); }
.qrow {
  display: grid; grid-template-columns: 15rem 1fr;
  gap: 1rem 2rem; align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.qrow > label, .qrow > .qlabel {
  font-size: 0.94rem; font-weight: 500; color: var(--night);
  letter-spacing: -0.005em;
}
.qfield { display: flex; align-items: center; gap: 1rem; }
.qfield input, .qfield select, .qfield textarea {
  width: 100%;
  padding: 0.45rem 0;
  border: none; background: transparent; border-radius: 0;
  color: var(--ink); font-size: 1.02rem;
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease);
}
.qfield input:focus, .qfield select:focus, .qfield textarea:focus {
  outline: none; border-bottom-color: var(--sky-deep);
}
.qfield input::placeholder, .qfield textarea::placeholder { color: var(--muted); opacity: 0.62; }
.qfield select { appearance: none; cursor: pointer; }
.qfield textarea { resize: vertical; min-height: 92px; padding-top: 0.2rem; }

/* the traveller count needs a fraction of the width, not all of it */
.qfield-pair input { max-width: 6rem; }
.qhint { font-size: 0.88rem; color: var(--muted); }

.qrow-msg { align-items: start; }
.qfoot {
  display: flex; align-items: center; gap: 1.6rem 2rem; flex-wrap: wrap;
  padding-top: 1.8rem;
}
.qfoot .form-note { margin-top: 0; max-width: 46ch; }

/* Range pills: budget bands read faster as choices than as a dropdown, and a
   radio keeps it working without JS. The input stays focusable, just visually
   replaced by its label. */
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
  display: inline-block; padding: 0.5rem 0.9rem;
  border: 1px solid var(--line); font-size: 0.87rem; color: var(--muted);
  cursor: pointer;
  transition: border-color 240ms var(--ease), color 240ms var(--ease),
              background-color 240ms var(--ease);
}
.pill input:checked + span {
  border-color: var(--sky-deep); color: var(--night); background: rgba(204,167,112,0.13);
}
.pill input:focus-visible + span { outline: 2px solid var(--sky-deep); outline-offset: 2px; }

/* ===== SENT MODAL — the second door after the form goes through ===== */

.modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
  background: rgba(13, 32, 71, 0.62);
  opacity: 0;
  transition: opacity 240ms var(--ease);
  overscroll-behavior: none;
}
.modal[hidden] { display: none; }
.modal.open { opacity: 1; }

.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 2 * var(--pad));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  will-change: opacity, transform;
}
.modal.open .modal-card { opacity: 1; transform: none; }

.modal-x {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: color 240ms var(--ease);
}
.modal-x:hover { color: var(--night); }

.modal-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--accent-text); margin-bottom: 0.9rem;
}
.modal-card h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); }
.modal-lead { color: var(--muted); margin-top: 0.9rem; }
.modal-card .rule { margin: 1.6rem 0 1.4rem; }
.modal-sub { font-weight: 500; color: var(--night); margin-bottom: 1.2rem; }
.modal-hint { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.9rem; }
.modal-foot { font-size: 0.8rem; color: var(--muted); margin-top: 1.4rem; }

/* Scoped with .modal-card, not bare, on purpose: .btn sets display:inline-flex
   further down the file, and at equal specificity the later rule would win and
   show the mobile button on desktop. */
.modal-card .modal-qr { display: flex; align-items: center; gap: 1.4rem; }
.modal-qr img {
  flex: none; width: 150px; height: 150px;
  background: var(--white);
  padding: 0.5rem;
  border: 1px solid var(--line);
}
/* One of these two paths is always hidden: the QR is pointless on the device
   WhatsApp is already installed on, and the app link is pointless on desktop. */
.modal-card .modal-wa { display: none; width: 100%; }

@media (max-width: 599px) {
  .modal-card .modal-qr { display: none; }
  .modal-card .modal-wa { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal-card { transition: none; }
}

/* ===== CAROUSEL — eleven kinds of journey =====
   Native scroll-snap rather than a JS slider: it keeps working with a swipe, a
   trackpad, the keyboard and the arrow buttons, and degrades to a plain
   scrollable row if the script never runs. Controls sit below the row as a
   dots-and-arrows cluster, not beside the heading, so the heading stays plain
   and the count of slides is never spelled out anywhere. */

.carousel-head { margin-bottom: clamp(2rem, 4vw, 2.8rem); }

.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.carousel-dots {
  display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden;
  gap: 0.5rem; justify-content: center; max-width: 60vw;
}
/* The visible dot is 8px, but the tappable button is 32px (WCAG 2.5.8's
   24px minimum, plus a margin): a pseudo-element carries the dot so the touch
   target can be well past the mark without the row reading as chunky. Full
   44px would make an 11-dot row nearly 500px wide for what's a secondary,
   optional control -- the carousel is already fully operable by swipe, the
   arrows and the keyboard without ever touching a dot. */
.carousel-dots button {
  position: relative; width: 32px; height: 32px; padding: 0; flex: none;
  border: none; background: transparent;
}
.carousel-dots button::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); transform: translate(-50%, -50%);
  transition: background-color 220ms var(--ease), transform 220ms var(--ease);
}
.carousel-dots button:hover::after { background: var(--sky); }
.carousel-dots button.is-active::after { background: var(--sky-deep); transform: translate(-50%, -50%) scale(1.35); }
.carousel-dots button:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 1px; }

/* Instagram-style tapering: only the current page plus its two nearest
   neighbours on each side ever show, so the row never needs to wrap no
   matter how many pages exist. Distance from the active dot shrinks the
   mark instead -- dots simply get smaller as they get further away, and
   pop in or out at the row's edges as the active page changes. */
.carousel-dots button.is-near::after { transform: translate(-50%, -50%) scale(0.75); }
.carousel-dots button.is-far::after { transform: translate(-50%, -50%) scale(0.45); }
.carousel-dots button.is-hidden { display: none; }

.cbtn {
  width: 46px; height: 46px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--night); background: transparent;
  transition: border-color 240ms var(--ease), background-color 240ms var(--ease),
              color 240ms var(--ease), opacity 240ms var(--ease);
}
.cbtn:hover { border-color: var(--night); background: var(--night); color: var(--white); }
.cbtn[disabled] { opacity: 0.3; pointer-events: none; }
.cbtn:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 2px; }

.carousel {
  display: flex; gap: clamp(1rem, 2vw, 1.6rem);
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad);
  padding: 0 var(--pad) 0.5rem;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 4px; }

.jslide { flex: 0 0 clamp(250px, 26vw, 340px); scroll-snap-align: start; }
.jslide a { display: block; height: 100%; }
.jslide-img {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; margin-bottom: 1.1rem; background: var(--paper-alt);
}
.jslide-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.jslide a:hover .jslide-img img { transform: scale(1.05); }
.jslide h3 { margin-bottom: 0.5rem; transition: color 240ms var(--ease); }
.jslide a:hover h3 { color: var(--accent-text); }
.jslide p { font-size: 0.94rem; color: var(--muted); }

/* ===== PLANS — who you are travelling with ===== */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); }

.plan { display: flex; flex-direction: column; }
.plan-img { overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper); }
.plan-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
.plan:hover .plan-img img { transform: scale(1.04); }
.plan-body { padding-top: 1.2rem; display: flex; flex-direction: column; flex: 1; }
.plan-body .numeral { font-size: 0.9rem; color: var(--accent-text); opacity: 0.85;
                      display: block; margin-bottom: 0.5rem; }
.plan-body h3 { margin-bottom: 0.6rem; }
.plan-body > p { font-size: 0.95rem; color: var(--muted); }
.plan-body .link-arrow { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; }


/* ==========================================================================
   White Owl — editorial travel identity
   Manrope throughout: light weights with tight tracking for display, 400 for text.
   ========================================================================== */

:root {
  /* v3 palette — místico y rústico. The night stays; the accent moves from
     cyan to a three-step gold ramp (wheat → fawn → copper), which is what
     carries the candle-on-stone read. Five values come from the client's own
     swatch sheet (marked below); the neutrals are derived to sit warm against
     them, since that sheet supplies no paper tone.
     Token NAMES are unchanged on purpose: --sky / --sky-deep now hold golds,
     so every existing rule keeps working and the hue shift happens in one
     place instead of across 900 lines of selectors. */
  --paper:      #f9f7f3;   /* derived: warm bone */
  --paper-alt:  #f2ebdd;   /* derived from wheat: alternating bands */
  --white:      #ffffff;
  --ink:        #16223f;   /* derived from navy: reading text */
  --night:      #153466;   /* Regal Navy      (cliente) */
  --night-deep: #0d2047;   /* derived: deepest bands, footer */
  --sky:        #cca770;   /* Soft Fawn       (cliente) — accent on dark */
  --sky-deep:   #af7a38;   /* Copper          (cliente) — accent fills, rules, borders */
  --accent-text:#855a26;   /* derived: same copper darkened to clear AA (5.5:1 on
                              paper, 5.1:1 on the wheat band) for small text */
  --wheat:      #e6cea1;   /* Wheat           (cliente) — warm fills */
  --line:       #cfdade;   /* Alabaster Grey  (cliente) */
  --line-soft:  #e8e2d6;   /* derived: softest rule on warm paper */
  --muted:      #6b6a63;   /* derived: warm grey */
  --numeral:    #cbb896;   /* derived from wheat: editorial numerals on paper */
  --pale-sky:   #bcd2e0;   /* Pale Sky        (cliente) — support on dark grounds */

  --pad:   clamp(1.25rem, 5vw, 4.5rem);
  --ease:  cubic-bezier(0.23, 1, 0.32, 1);
  --nav-h: 84px;
  --topbar-h: 38px;

  /* Type tokens. type-sans.css overrides just these two plus a handful of
     optical adjustments, so both variants share one stylesheet. */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-text:    'Manrope', system-ui, -apple-system, sans-serif;
}

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }

/* ===== TYPE ===== */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.028em;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 5rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.9rem); }
h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* Deck — the supporting paragraph under a heading. Replaces label-clutter. */
.deck {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--muted);
  font-weight: 300;
}
.deck-lg {
  font-size: clamp(1.12rem, 1.7vw, 1.42rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-weight: 300;
}

/* Micro-label. Deliberately rare: hero locator + destinations band only. */
.label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Editorial numeral used in place of icons */
.numeral {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--numeral);
  transition: color 260ms var(--ease);
  font-variant-numeric: lining-nums;
}

.meta {
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.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;
}

section[id] { scroll-margin-top: calc(var(--topbar-h) + var(--nav-h) + 8px); }

/* ===== LAYOUT ===== */

.wrap    { max-width: 1220px; margin: 0 auto; padding: 0 var(--pad); }
.wrap-nr { max-width: 780px;  margin: 0 auto; padding: 0 var(--pad); }
.section       { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.section-tight { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.center { text-align: center; }

.grid   { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.rule { height: 1px; background: var(--line); border: 0; }

/* Contact page: form beside an info aside. A class, not an inline style, so the
   mobile breakpoint can actually reach it. */
.grid-aside {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
/* Flipped variant: aside (preview + info) left, form right. Used on the
   contact page when a tour/program was pre-selected so the cover photo and
   description sit beside the form instead of below it. */
.grid-aside--flipped {
  grid-template-columns: 1fr 1fr;
}

/* ===== ANIMATION =====
   Scroll entrances run long (~700ms) for a calm, editorial feel.
   Hover/UI transitions stay at 240ms. Both share the same easing. */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Heading slides up from behind a mask. Wraps whole block, so it is
   translation-safe (no manual line breaks). */
/* overflow:hidden is what makes the reveal slide read as a wipe. The padding
   has to clear the font's descender at line-height 1.04, or headings ending
   in g/j/p/q get their tails sliced off. 0.06em was not enough for Manrope. */
.mask { display: block; overflow: hidden; padding-bottom: 0.2em; }
.mask > * {
  display: block;
  transform: translateY(102%);
  transition: transform 900ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in .mask > *, .mask.in > * { transform: none; }

/* Hairline that draws itself in */
.draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in .draw, .draw.in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .mask > *, .draw {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-bg { animation: none !important; }
}

/* ===== NAV =====
   No backdrop-filter: it would establish a containing block and trap the
   fixed-position mobile panel inside the nav box. */

/* The header is what's fixed, not the nav: the contact strip has to ride with
   it. A fixed ancestor does NOT establish a containing block for the fixed
   mobile menu inside nav (only transform / filter / will-change / contain do),
   so the off-canvas panel still measures against the viewport. Never put a
   transform or backdrop-filter on .site-head, that's exactly what would trap
   it. */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 200; }

nav {
  position: relative;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
nav.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(22, 34, 63, 0.06);
}

.nav-logo { display: flex; align-items: center; gap: 0.65rem; }
.nav-logo img { width: 40px; height: 40px; }
.nav-logo span {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--night);
}

.nav-links { display: flex; align-items: center; gap: 2.2rem; }
.nav-contact { display: none; }
/* Only the nav keeps its buttons on one line; elsewhere long CTAs may wrap. */
.nav-links .btn { white-space: nowrap; }

/* :not(.btn) keeps this off the CTA — the earlier version of this rule beat
   .btn-primary on specificity and rendered the CTA navy-on-navy. */
.nav-links > a:not(.btn) {
  position: relative;
  font-size: 0.94rem;
  color: var(--ink);
  white-space: nowrap;
  padding: 0.3rem 0;
  transition: color 240ms var(--ease);
}
.nav-links > a:not(.btn)::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--sky-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease);
}
.nav-links > a:not(.btn):hover { color: var(--accent-text); }
.nav-links > a:not(.btn):hover::after,
.nav-links > a.active::after { transform: scaleX(1); }
.nav-links > a.active { color: var(--accent-text); }

/* ===== LANGUAGE SWITCH — flag + dropdown =====
   Built as a button (current language) plus a menu of every OTHER language,
   not a two-way flip: with only EN/ES today a flip would look identical, but
   the client has said more languages are coming, and a flip has no defined
   behaviour once there are three options to cycle through. A dropdown scales
   to any count without changing the interaction, so it's built that way now
   rather than redone later. */

.lang-switch { position: relative; }
.lang-cur {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.3rem;
  min-height: 44px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 240ms var(--ease);
}
.lang-cur:hover, .lang-switch.open .lang-cur { color: var(--night); }
.lang-cur .flag { width: 18px; height: 13px; flex: none; border-radius: 1px;
                  box-shadow: 0 0 0 1px rgba(13,34,63,0.12); }
.lang-cur .chev { transition: transform 240ms var(--ease); flex: none; }
.lang-switch.open .lang-cur .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 60;
  min-width: 148px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(13, 32, 71, 0.14);
  padding: 0.4rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  min-height: 44px;
  font-size: 0.85rem; color: var(--ink);
  transition: background-color 200ms var(--ease);
}
.lang-menu a:hover { background: var(--paper-alt); }
.lang-menu .flag { width: 18px; height: 13px; flex: none; border-radius: 1px;
                   box-shadow: 0 0 0 1px rgba(13,34,63,0.12); }

/* Inside the off-canvas mobile panel a floating dropdown would open off-screen
   and a tap-to-reveal step is one tap more than a short list needs: the other
   language(s) just sit inline below the current one, always visible. */
@media (max-width: 1080px) {
  .lang-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; margin-top: 0.5rem; padding: 0;
  }
  .lang-cur { pointer-events: none; padding-left: 0; }
  .lang-cur .chev { display: none; }
}

/* 44px is the minimum comfortable touch target; the three bars stay the same
   size and are re-centred inside the larger hit area rather than growing. */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; margin-right: -8px; }
.nav-toggle span {
  position: absolute; left: 8px; right: 8px; height: 1.5px;
  background: var(--night);
  transition: transform 300ms var(--ease), opacity 240ms var(--ease);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

main { padding-top: calc(var(--topbar-h) + var(--nav-h)); }

/* ===== BUTTONS ===== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: 2px;
  font-family: var(--font-text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background 260ms var(--ease), color 260ms var(--ease),
              border-color 260ms var(--ease), transform 260ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--sky); color: var(--night); }
.btn-primary:hover { background: var(--night); color: var(--white); }

.btn-ink { background: var(--night); color: var(--white); }
.btn-ink:hover { background: var(--sky); color: var(--night); }

.btn-outline {
  border: 1px solid var(--night);
  color: var(--night);
  background: transparent;
}
.btn-outline:hover { background: var(--night); color: var(--white); }

.btn-light {
  border: 1px solid rgba(249,247,243, 0.45);
  color: var(--white);
  background: transparent;
}
.btn-light:hover { background: var(--white); color: var(--night); border-color: var(--white); }

.btn-sm { padding: 0.7rem 1.4rem; font-size: 0.74rem; }

/* Text link with a rule that slides in */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 500; color: var(--night);
  padding-bottom: 0.35rem;
  position: relative;
}
.link-arrow::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--night);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}
.link-arrow:hover::after { transform: scaleX(0.25); }
.link-arrow svg { transition: transform 300ms var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ===== HERO ===== */

.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  color: var(--white);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: kenburns 22s var(--ease) forwards;
}
@keyframes kenburns { from { transform: scale(1.1); } to { transform: scale(1); } }

.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 32, 71,0.44) 0%, rgba(13, 32, 71,0.22) 26%,
                    rgba(13, 32, 71,0.58) 58%, rgba(13, 32, 71,0.88) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 900px; }
.hero-content h1 { color: var(--white); }
/* White, not celeste: over a bright sky the accent loses all contrast. */
.hero-content .label { color: var(--wheat); }
.hero-content .deck { color: rgba(249,247,243,0.95); max-width: 540px; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Subpage hero */
.page-hero {
  position: relative;
  min-height: min(62vh, 560px);
  display: flex; align-items: flex-end;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  color: var(--white);
  overflow: hidden;
}
.page-hero .hero-content { max-width: 780px; }
.page-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); }


/* ===== DARK BAND ===== */

/* Dark bands. band-deep used to carry only a background, so its .deck kept the
   light-background --muted (a warm grey) and turned muddy on navy. Both dark
   bands now share one block, and supporting copy sits at 0.92 rather than 0.72:
   on this navy anything dimmer stops reading as text and starts reading as a
   shadow. */
.band-dark, .band-deep { color: var(--white); }
.band-dark { background: var(--night); }
.band-deep { background: var(--night-deep); }
.band-dark h1, .band-dark h2, .band-dark h3,
.band-deep h1, .band-deep h2, .band-deep h3 { color: var(--white); }
.band-dark .deck, .band-dark .muted-text,
.band-deep .deck, .band-deep .muted-text { color: rgba(249,247,243,0.92); }
.band-dark p, .band-deep p { color: rgba(249,247,243,0.92); }
.band-dark .label, .band-deep .label { color: var(--wheat); }
.band-dark .numeral, .band-deep .numeral { color: rgba(249,247,243,0.42); }
.band-dark .rule, .band-deep .rule { background: rgba(249,247,243,0.22); }
.band-dark .fn, .band-deep .fn { color: rgba(249,247,243,0.75); }

.band-alt  { background: var(--paper-alt); }
.band-white{ background: var(--white); }

/* ===== STATS ===== */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--line);
  padding-top: 2.2rem;
}
.band-dark .stats, .band-deep .stats { border-top-color: rgba(249,247,243,0.24); }
.stat b {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.9vw, 3.1rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--sky-deep);
  display: block;
  margin-bottom: 0.5rem;
}
.band-dark .stat b, .band-deep .stat b { color: var(--wheat); }
.stat span { font-size: 0.86rem; color: var(--muted); }
.band-dark .stat span, .band-deep .stat span { color: rgba(249,247,243,0.86); }

/* ===== EDITORIAL INDEX LIST (replaces the emoji card grid) ===== */

.index-list { border-top: 1px solid var(--line); }
.index-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 1.5fr;
  gap: 2rem;
  align-items: baseline;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--line);
  transition: background 300ms var(--ease);
}
.index-row h3 { transition: transform 300ms var(--ease), color 300ms var(--ease); }
.index-row p { color: var(--muted); font-size: 0.97rem; }
a.index-row:hover { background: linear-gradient(90deg, rgba(204,167,112,0.07), transparent 70%); }
a.index-row:hover h3 { transform: translateX(6px); color: var(--accent-text); }
a.index-row:hover .numeral { color: var(--sky); }

/* ===== DESTINATION TILES ===== */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  display: flex; align-items: flex-end;
  color: var(--white);
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease);
}
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 32, 71,0) 22%, rgba(13, 32, 71,0.5) 60%, rgba(13, 32, 71,0.92) 100%);
}
.tile-body { position: relative; z-index: 2; padding: 1.8rem; }
.tile-body h3 { color: var(--white); margin-bottom: 0.3rem; }
.tile-body p { font-size: 0.88rem; color: rgba(249,247,243,0.8); }

/* ===== JOURNEY CARD ===== */

.journey { display: flex; flex-direction: column; }
.journey-img {
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 1.3rem;
  aspect-ratio: 4 / 3;
}
.journey-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease);
}
.journey:hover .journey-img img { transform: scale(1.05); }
.journey h3 { margin: 0.55rem 0 0.5rem; }
.journey p:not(.meta) { color: var(--muted); font-size: 0.97rem; margin-bottom: 1.1rem; }
.journey .link-arrow { align-self: flex-start; margin-top: auto; }

/* ===== FEATURE ROW (alternating image + text) ===== */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.feature-img { overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; }
.feature-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1000ms var(--ease);
}
.feature:hover .feature-img img { transform: scale(1.04); }
.feature.flip .feature-img { order: 2; }

.feature-head {
  display: flex; align-items: baseline; gap: 1.1rem;
  margin-bottom: 0.9rem;
}
.feature-meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  padding: 1rem 0;
  margin: 1.2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ===== SPEC LIST ===== */

.spec-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  font-size: 0.99rem;
}
.spec-list li::before {
  content: '';
  position: absolute; left: 0; top: 0.72em;
  width: 8px; height: 1px;
  background: var(--sky-deep);
}

/* ===== ITINERARY — day-by-day rows on /programas.html =====
   Same label-left, rule-between-rows shape as .qrow on the enquiry form:
   already proven at this width for "one short label, one longer value" pairs,
   so a day-by-day breakdown reuses it rather than inventing a new pattern. */

.itin { border-top: 1px solid var(--line); margin-top: 2rem; }
.itin-row {
  display: grid; grid-template-columns: 7rem 1fr;
  gap: 0.6rem 2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.itin-row .day {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-text);
  padding-top: 0.15rem;
}
.itin-row p { font-size: 0.95rem; color: var(--ink); line-height: 1.65; }

/* ===== PROCESS STEPS ===== */

.step { position: relative; padding-top: 1.6rem; }
.step::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--sky);
  transform-origin: left;
}
.step .numeral { display: block; margin-bottom: 0.6rem; }
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--muted); font-size: 0.97rem; }


  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: -0.015em;
  font-style: normal;
  margin-bottom: 0.9rem;
}

/* ===== FAQ ===== */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0;
  font-size: 1.04rem; font-weight: 400;
  transition: color 240ms var(--ease);
}
.faq-q:hover { color: var(--accent-text); }
.faq-icon { position: relative; width: 13px; height: 13px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute; top: 50%; left: 0;
  width: 100%; height: 1px;
  background: var(--sky-deep);
  transition: transform 300ms var(--ease);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item.open .faq-icon::after { transform: rotate(0deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease); }
.faq-a p { padding-bottom: 1.5rem; color: var(--muted); max-width: 62ch; }

/* ===== FORM ===== */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.field input, .field select, .field textarea {
  padding: 0.8rem 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 240ms var(--ease);
}
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--sky-deep);
}
.field input::placeholder, .field textarea::placeholder { color: #a9bcc7; }
.field select { appearance: none; cursor: pointer; }

.form-note { font-size: 0.8rem; color: var(--muted); margin-top: 0.9rem; }
.form-success {
  display: none;
  margin-top: 1.2rem;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--sky);
  background: rgba(204,167,112,0.09);
  font-size: 0.95rem;
}
.form-success.show { display: block; }

/* ===== REQUEST PREVIEW =====
   Cover photo + short description of whatever was pre-selected via ?tour=,
   shown at the top of the contact page's aside. Fills the column that
   otherwise sits mostly empty beside the (much taller) form. */

.req-preview { margin-bottom: 1.8rem; }
.req-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
.req-preview p {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Friendly default for a direct visit to the contact page. It is replaced by
   the selected tour/program's banner and preview as soon as the form changes. */
.req-empty { margin-bottom: 1.8rem; }
.req-empty p {
  padding: 0.9rem 1.2rem;
  background: rgba(204,167,112,0.14);
  border: 1px solid var(--sky);
  font-size: 0.92rem;
  color: var(--ink);
}
.req-empty img {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

/* ===== CONTACT INFO FOOTER =====
   Sits below the two-column grid on the contact page, spanning full width.
   Contains direct-contact buttons, office info and social links. */
.contact-info-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
}

/* ===== INFO PANEL ===== */

.info-panel { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.info-panel + .info-panel { margin-top: 0; }
.info-panel h3 { margin-bottom: 1rem; }
.info-row { margin-bottom: 1rem; }
.info-row p:not(.meta) { font-size: 0.98rem; }

/* ===== WHATSAPP FLOAT ===== */

.wa-float {
  position: fixed; right: 1.7rem; bottom: 1.7rem; z-index: 300;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(13, 32, 71, 0.22);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 12px 30px rgba(13, 32, 71, 0.3); }

/* ===== FULL BLEED ===== */

.full-bleed { position: relative; overflow: hidden; height: clamp(300px, 52vh, 560px); }
.full-bleed img { width: 100%; height: 100%; object-fit: cover; }

/* ===== LEGAL PROSE ===== */

.prose { display: flex; flex-direction: column; gap: 1.1rem; }
.prose h2 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 500; margin-top: 1.6rem; }
.prose a { color: var(--accent-text); border-bottom: 1px solid var(--line); }
.prose a:hover { border-bottom-color: var(--sky-deep); }

/* ===== FOOTER ===== */

footer { background: var(--night-deep); color: rgba(249,247,243,0.9); padding: clamp(3rem,6vw,5rem) 0 2rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 2.5rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid rgba(249,247,243,0.14);
}
.footer-grid h4 {
  color: var(--white);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 1.1rem;
}
.footer-grid ul li { margin-bottom: 0.7rem; font-size: 0.94rem; }
.footer-grid a { transition: color 240ms var(--ease); }
.footer-grid a:hover { color: var(--sky); }
.footer-logo { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.1rem; }
.footer-logo img { width: 38px; height: 38px; }
.footer-logo span {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.28rem; font-weight: 600; letter-spacing: -0.01em; color: var(--white);
}
.footer-bottom {
  padding-top: 1.7rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  font-size: 0.82rem; color: rgba(249,247,243,0.75);
}
.footer-bottom a:hover { color: var(--sky); }

/* ==========================================================================
   RESPONSIVE — max-width blocks in descending order so later rules only ever
   narrow the layout further. Keep them sorted when adding new ones.
   ========================================================================== */

/* ===== NAV: off-canvas below the desktop layout's natural width =====
   Measured: the horizontal nav needs ~950px (logo + 5 links, including
   Programs + language switch + CTA). Below that the labels wrapped to two
   lines, so every tablet width was broken. The panel takes over at 1080px,
   which keeps a comfortable margin and covers tablet portrait and landscape.
   Re-measure this if another nav link is ever added. */

@media (max-width: 1080px) {
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: var(--paper);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.7rem;
    padding: 2rem var(--pad) 4rem;
    transform: translateX(100%);
    transition: transform 380ms var(--ease);
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-contact {
    display: flex; flex-direction: column; gap: 0.6rem;
    padding-top: 1.4rem; margin-top: 0.4rem;
    border-top: 1px solid var(--line);
    width: 100%; max-width: 22rem;
  }
  .nav-contact a { font-size: 0.95rem; color: var(--muted); }
  /* The promo strip is hidden at this width, so the offer rides in the menu
     instead of disappearing on the devices most likely to tap through. */
  .nav-promo {
    display: flex; align-items: baseline; gap: 0.5rem;
    flex-wrap: wrap; margin-bottom: 0.3rem;
  }
  .nav-promo strong { font-weight: 600; color: var(--accent-text); font-size: 0.95rem; }
  .nav-promo .tag-pre {
    font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--muted);
  }
  .nav-promo .tag-dot { background: var(--sky-deep); }
  .nav-links > a:not(.btn) {
    font-size: clamp(1.3rem, 3.2vw, 1.7rem);
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .nav-links > a:not(.btn)::after { display: none; }
  .nav-links .lang-switch { font-size: 0.9rem; }
  .nav-links .btn { width: 100%; max-width: 22rem; }
  .nav-toggle { display: block; }

  /* Four columns would leave ~190px each here, too narrow for these headings. */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 860px) {
  .topbar { display: none; }

  /* From here down the site is driven by a finger, not a cursor. Anything
     tappable gets a 44px target: the menu's contact links were 25px tall and
     the stacked footer links 21px, close enough together to mis-tap. */
  .nav-contact a { min-height: 44px; display: flex; align-items: center; }
  .footer-grid ul li { margin-bottom: 0; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid ul a,
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .link-arrow { min-height: 44px; }

  /* 11.2px uppercase with wide tracking reads on a desktop monitor and not on
     a handheld screen. */
  .label { font-size: 0.72rem; }
  main { padding-top: var(--nav-h); }
  section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
  html { font-size: 16px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr; }
  .grid-aside { grid-template-columns: 1fr; }
  .contact-info-footer { grid-template-columns: 1fr; }
  .info-panel + .info-panel { margin-top: 1.8rem; }
  .feature.flip .feature-img { order: 0; }
  .extras { grid-template-columns: 1fr; gap: 2.2rem; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .qrow { grid-template-columns: 11rem 1fr; }
  .itin-row { grid-template-columns: 5.5rem 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 16 / 9; }
  .index-row { grid-template-columns: 3.5rem 1fr; row-gap: 0.5rem; }
  .index-row p { grid-column: 2; }
}

@media (max-width: 599px) {
  :root { --nav-h: 72px; }

  .nav-promo strong { font-size: 1rem; }
  .nav-promo .tag-pre { font-size: 0.74rem; }


  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; gap: 2.2rem; }
  /* below this a label column leaves the input too narrow to type in */
  .qrow { grid-template-columns: 1fr; gap: 0.5rem; padding: 1rem 0; }
  .itin-row { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.9rem 0; }
  .itin-row .day { padding-top: 0; }
  .qfoot { flex-direction: column; align-items: stretch; }
  .qfoot .btn { width: 100%; }
  .jslide { flex: 0 0 78vw; }
  /* the arrows are a pointer affordance; on a touch screen the swipe is the
     interaction, so only they go, the dots stay as a position indicator */
  .carousel-controls .cbtn { display: none; }
  .carousel-dots { max-width: 100%; }
  /* the profile's labels stop being legible once it is squeezed this far, so it
     scrolls at a readable width instead of shrinking to nothing. The mask fades
     the right edge so it is visible that there is more to swipe to; without it
     the diagram just looks cropped. */
  .profile-scroll, .table-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
  }
  .profile-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .profile { min-width: 620px; }
  .topbar { font-size: 0.74rem; }
  .topbar-in { justify-content: center; gap: 0.5rem 1.1rem; }
  .topbar-links { gap: 1.1rem; justify-content: center; }

  .stats { grid-template-columns: 1fr; gap: 1.6rem; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .index-row { grid-template-columns: 2.6rem 1fr; gap: 1.2rem; padding: 1.6rem 0; }
  .feature-meta { gap: 1rem; }
  .btn { padding: 0.9rem 1.4rem; }
  .center > .btn { display: flex; width: 100%; }
  .wa-float { right: 1rem; bottom: 1rem; width: 50px; height: 50px; }
}

/* Client photographs — encounters, food and living traditions. */
.experiences { background: var(--night-deep); color: #fff; }
.experience-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: end; margin-bottom: 3rem; }
.experience-heading h2 { max-width: 680px; color: #fff; }
.experience-heading .deck { color: #d6dfed; }
.experience-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1rem,2.2vw,2rem); }
.experience-card { min-width: 0; }
.experience-photo { position: relative; display: block; overflow: hidden; background: #10213c; }
.experience-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.experience-card .experience-photo { aspect-ratio: 3/4; }
.experience-card:nth-child(2) .experience-photo { aspect-ratio: 1/1; }
.experience-card:nth-child(2) { padding-top: 4rem; }
.experience-zoom { position: absolute; bottom: .75rem; right: .75rem; display: grid; place-items: center; width: 36px; height: 36px; background: rgba(9,22,44,.8); color: #fff; }
.experience-photo:hover img { transform: scale(1.035); }
.experience-photo:focus-visible, .experiences a:focus-visible, .experiences summary:focus-visible { outline: 3px solid var(--wheat); outline-offset: 5px; }
.experience-copy { padding-top: 1.5rem; }
.experience-copy h3 { color: #fff; font-size: clamp(1.5rem,2.2vw,2rem); }
.experience-copy p { color: #d6dfed; font-size: 1rem; line-height: 1.7; margin: 1rem 0 1.3rem; }
.experience-copy .link-arrow { color: var(--wheat); }
.experience-copy .link-arrow::after { background: currentColor; }
.experience-more { border-top: 1px solid #526078; border-bottom: 1px solid #526078; margin-top: 3rem; }
.experience-more summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 1.4rem 0; font-size: 1rem; color: var(--wheat); list-style: none; }
.experience-more summary::-webkit-details-marker { display: none; }
.experience-more summary > span:last-child { font-size: 1.5rem; transition: transform .2s; }
.experience-more[open] summary > span:last-child { transform: rotate(45deg); }
.experience-archive { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem 1.5rem; padding: 1rem 0 2rem; }
.experience-archive .experience-photo { aspect-ratio: 4/3; }
.experience-archive figcaption { font-size: .9375rem; line-height: 1.5; margin-top: .8rem; color: #d6dfed; }
.experience-film { min-width: 0; }
.experience-film video { display: block; width: 100%; aspect-ratio: 4/3; background: #071325; object-fit: contain; border-radius: 3px; }
.experience-film h4 { color: #d6dfed; font-family: inherit; font-size: .9375rem; font-weight: 400; line-height: 1.5; }
.experience-dialog { position: fixed; inset: 0; width: min(1100px,96vw); max-width: 96vw; max-height: 96dvh; margin: auto; padding: 3.6rem 1rem 1rem; border: 1px solid #53647e; background: #0b1931; color: #fff; overflow: auto; }
.experience-dialog::backdrop { background: rgba(3,9,20,.92); }
.experience-dialog figure { margin: 0; text-align: center; }
.experience-dialog figure img { display: block; margin: auto; max-width: 100%; width: auto; height: auto; max-height: 66dvh; object-fit: contain; }
.experience-dialog figcaption { margin: 1rem auto; font-size: 1rem; line-height: 1.5; max-width: 700px; }
.experience-dialog button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid #6c7d94; background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }
.experience-dialog button:hover { background: #263d5d; }
.experience-dialog button:focus-visible { outline: 3px solid var(--wheat); outline-offset: 3px; }
.gallery-close { position: absolute; top: .5rem; right: .75rem; }
.gallery-navigation { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
#gallery-count { min-width: 4rem; text-align: center; font-size: .9375rem; }
@media (max-width: 900px) {
 .experience-heading { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 700px) {
 .experience-grid { grid-template-columns: 1fr; gap: 2.5rem; }
 .experience-card:nth-child(2) { padding-top: 0; }
 .experience-card .experience-photo, .experience-card:nth-child(2) .experience-photo { aspect-ratio: 4/3; }
 .experience-card:first-child .experience-photo { aspect-ratio: 4/5; }
 .experience-archive { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
 .experience-photo img, .experience-more summary > span:last-child { transition: none; }
}


/* ===== MANY LANGUAGES =====
   The site ships in ten languages. Everything below is about the ones that
   need more than a different string: a taller language menu, non-Latin type,
   and right-to-left layout for Arabic. */

/* Ten entries is a long list: cap the desktop dropdown and let it scroll. */
.lang-menu { max-height: min(70vh, 26rem); overflow-y: auto; }
@media (max-width: 1080px) {
  /* inside the mobile panel the other nine languages become a compact grid */
  .lang-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.8rem; max-height: none; overflow: visible; }
  .lang-menu a { padding-left: 0; padding-right: 0; }
}

/* Non-Latin scripts: Manrope has no CJK or Arabic glyphs, so name the fonts
   each platform ships instead of leaving the browser to guess a fallback. */
:lang(ja) { --font-display: 'Manrope', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', system-ui, sans-serif; --font-text: var(--font-display); }
:lang(ko) { --font-display: 'Manrope', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif; --font-text: var(--font-display); }
:lang(zh) { --font-display: 'Manrope', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif; --font-text: var(--font-display); }
:lang(ar) { --font-display: 'Segoe UI', 'Geeza Pro', 'Noto Sans Arabic', Tahoma, system-ui, sans-serif; --font-text: var(--font-display); }

/* CJK and Arabic have no capitals to shout and no room for tracking:
   letter-spacing breaks Arabic's joined letters outright. */
:lang(ja), :lang(ko), :lang(zh), :lang(ar) { word-break: normal; line-break: strict; }
:lang(ar) *, :lang(ja) *, :lang(zh) *, :lang(ko) * { letter-spacing: normal !important; text-transform: none !important; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.35; }
:lang(ja) h1, :lang(ja) h2, :lang(zh) h1, :lang(zh) h2, :lang(ko) h1, :lang(ko) h2 { line-height: 1.25; }
:lang(ja) body, :lang(zh) body, :lang(ko) body { line-height: 1.8; }

/* ---- right to left (Arabic) ---- */
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .wa-float { right: auto; left: 1.7rem; }
[dir="rtl"] .modal-x, [dir="rtl"] .experience-zoom, [dir="rtl"] .gallery-close { right: auto; left: 0.75rem; }
[dir="rtl"] .nav-toggle { margin-right: 0; margin-left: -8px; }
[dir="rtl"] .extra-group li { padding-left: 0; padding-right: 1.1rem; }
[dir="rtl"] .spec-list li { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .extra-group li::before, [dir="rtl"] .spec-list li::before { left: auto; right: 0; }
[dir="rtl"] .faq-q { text-align: right; }
[dir="rtl"] .form-success { border-left: 0; border-right: 2px solid var(--sky); }
[dir="rtl"] .nav-links > a:not(.btn)::after, [dir="rtl"] .link-arrow::after { left: auto; right: 0; }
/* arrows point along the reading direction */
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .cbtn svg { transform: scaleX(-1); }
[dir="rtl"] .lang-cur .flag, [dir="rtl"] .lang-menu .flag { margin-inline: 0; }
/* The carousel's scroll maths (arrows, dots) assumes scrollLeft grows to the
   right, which right-to-left containers invert. Keep the strip itself left to
   right and restore the reading direction inside each card. */
[dir="rtl"] .carousel { direction: ltr; }
[dir="rtl"] .carousel > * { direction: rtl; }
@media (max-width: 1080px) {
  [dir="rtl"] .nav-links { transform: translateX(-100%); }
  [dir="rtl"] .nav-links.open { transform: translateX(0); }
}

/* Long compounds (German "Datenschutzerklärung") must never push the page wider
   than the screen: break them if nothing else fits, and hyphenate where the
   language allows it. */
h1, h2, h3, h4, p, li, a, span, label, button, figcaption { overflow-wrap: break-word; }
:lang(de), :lang(fr), :lang(pt), :lang(it), :lang(es) { hyphens: auto; }

/* Phone numbers and other Latin/number runs keep their order inside right-to-left text. */
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="tel:"] span { direction: ltr; unicode-bidi: isolate; }