/* =====================================================
   ANDEAN ADVENTURES PERU — Design system
   Wireframe v1 · OKLCH · esquinas redondeadas · ease-out expo
   ===================================================== */

:root {
  /* ============================================================
     COLOR — sampled directly from the Andean Adventures logotype.
     The mark is four blues; there is no warm colour in it, so blue
     is the primary and every neutral leans blue rather than warm.

       #0A326E  deep navy   wordmark + peak   (dominant)
       #00468C  mid-deep
       #145AA0  mid
       #4678BE  sky
     ============================================================ */

  /* Brand ramp — the four logo blues, plus one darker step for bands */
  --brand-950: oklch(0.240 0.080 259);          /* deepest — dark sections   */
  --brand-900: oklch(0.330 0.113 259);          /* #0A326E  PRIMARY          */
  --brand-700: oklch(0.400 0.132 255);          /* #00468C                   */
  --brand-600: oklch(0.465 0.131 253);          /* #145AA0  links / CTA      */
  --brand-400: oklch(0.571 0.122 257);          /* #4678BE  sky              */
  --brand-200: oklch(0.808 0.098 217);          /* #6fd0e9 celeste — on dark */
  --brand-150: oklch(0.860 0.095 217);          /* #80e1fb celeste ground    */
  --brand-050: oklch(0.960 0.016 255);          /* wash — subtle surfaces    */

  --brand: var(--brand-900);
  --brand-hover: var(--brand-700);

  /* Warm accent — kept from the original palette, used sparingly:
     eyebrows, link arrows, small marks. Never a section ground. */
  --accent: oklch(0.55 0.16 38);                /* terracotta                */
  /* From the client's live site. Amber is a background only — navy on it is
     8.36:1; on white it is 1.53:1. Coral is display-size text and marks. */
  --accent-amber: #ffc943;
  --accent-orange: #fc724c;
  --accent-coral: #e86b4d;
  --accent-deep: oklch(0.47 0.15 36);
  --accent-soft: oklch(0.74 0.12 62);           /* muted gold, on dark only  */

  /* Neutrals — biased toward the brand hue so they read as chosen */
  --ink: oklch(0.215 0.020 259);
  --ink-body: oklch(0.400 0.016 259);
  --ink-secondary: oklch(0.500 0.013 259);
  --ink-muted: oklch(0.545 0.011 259);         /* 4.54:1 on sand; was 0.580 = 3.93 */

  --line: oklch(0.895 0.007 259);
  --line-soft: oklch(0.945 0.005 259);
  --bg-page: oklch(0.995 0.002 259);
  --surface: oklch(0.970 0.006 255);            /* cool alternating ground   */
  --bg-dark: var(--ground-dark);

  --on-dark: oklch(0.975 0.004 255);
  --on-dark-body: oklch(0.855 0.012 255);
  --on-dark-muted: oklch(0.700 0.018 255);

  /* Section grounds — deliberately close to neutral so photography leads.
     Keep these separate from the brand ramp: --brand-* stays saturated
     for buttons, links and accents. */
  --ground-dark: oklch(0.318 0.073 259);          /* #1a3257 — the client's own deep blue */
  --ground-deep: oklch(0.255 0.060 259);    /* #10223f — was 0.185/0.016, near-black */

  --wa-green: oklch(0.52 0.13 152);            /* 5.18:1 for white; was 0.62 = 3.44 */
  --form-error: oklch(0.52 0.19 27);   /* semantic, not the brand accent */

  /* ---- Aliases ----
     `--sand`/`--stone*` are from the previous warm pass; they now resolve to
     the cool system so any rule still referencing them stays on-brand. */
  --sand: var(--surface);
  --stone-deep: var(--brand-950);
  --stone: var(--brand-900);
  --stone-soft: var(--brand-700);
  --clay: var(--accent);
  --clay-deep: var(--accent-deep);
  --ochre: var(--accent-soft);
  --navy: var(--brand-900);
  --navy-deep: var(--brand-950);
  --navy-soft: var(--brand-700);
  --terracotta: var(--accent);
  --coral: var(--accent);
  --gold: var(--accent-soft);
  --blue-brand: var(--brand-600);
  --teal: var(--brand-400);

  /* Shape */
  --radius-card: 4px;
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --btn-light-hover: oklch(0.905 0.008 255);    /* one step under --on-dark */
  --radius-btn: 2px;
  --radius-lg: 6px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms;
  --t-med: 220ms;
  --t-slow: 400ms;

  /* Type */
  /* Was Fraunces, a serif. Kept as a token so every rule that asks for
     the display face still resolves — it now resolves to the same
     grotesque as the body, which is what makes the page read modern. */
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;

  /* Layout */
  --wrap-max: 1200px;
  --wrap-wide: 1440px;
  --wrap-text: 640px;
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --header-h: 76px;

  /* Vertical rhythm — sections vary deliberately instead of all sharing one value */
  /* 8rem top and bottom put 256px of nothing between two blocks of text.
     6rem leaves 192, which still separates them without a hole. */
  --section-y: clamp(3rem, 5.5vw, 5rem);
  --section-y-lg: clamp(5rem, 9.5vw, 8.5rem);
  --section-y-sm: clamp(3rem, 5vw, 4.5rem);

  /* Shadows */
  --shadow-sm: 0 2px 4px oklch(0 0 0 / 0.08);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.12);
  --shadow-xl: 0 16px 40px oklch(0 0 0 / 0.15);

  /* Opacity */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.95;
  --opacity-active: 0.9;

  /* Typography Scale */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.02em;

  /* Breakpoints */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;

  /* Transitions */
  --transition-fast: all var(--t-fast) var(--ease-out-expo);
  --transition-med: all var(--t-med) var(--ease-out-expo);
  --transition-slow: all var(--t-slow) var(--ease-out-expo);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
/* Home lets the hero run under the transparent header.
   Inner pages keep the offset so content clears the bar. */
body:not(.has-hero) { padding-top: var(--header-h); }

/* height:auto matters more than it looks. Every <img> carries width/height
   attributes for layout stability; those map to presentational height, which
   silently beat `aspect-ratio` wherever a component set one. The collections
   strip was rendering 1280px tall, editorial rows 854px and the split intros
   768px — the aspect-ratio was declared and ignored. Components that really
   want a fixed height set it in their own rule and still win on specificity. */
img { max-width: 100%; height: auto; display: block; }

/* One family, weight and tracking carry the hierarchy. The serif display face
   with italic accents read as formal and dated; a single grotesque set tight
   and heavy is both cleaner and one font family lighter to download. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--line-height-tight);
  margin: 0;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  margin-top: 0;
}

h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: clamp(0.6rem, 1.2vw, 0.85rem);
}

h4 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

/* Heading accent. The <em> stays for meaning, but the italic serif that made
   it read as a wedding invitation is gone — the emphasis is now colour only,
   at the same weight and slant as the rest of the line. */
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: inherit;
  color: var(--brand-600);
}
.duo-dark h2 em,
.how h2 em,
.hero-content h1 em,
.final-cta h2 em {
  color: var(--brand-200);
}

p {
  margin: 0;
  max-width: 62ch;
  line-height: var(--line-height-normal);
}

.wrap {
  max-width: var(--wrap-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  /* Ensure no overflow on smaller screens */
  width: 100%;
  box-sizing: border-box;
}

section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--on-dark);
  padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--blue-brand);
  outline-offset: 2px;
}
.btn:focus-visible { outline-offset: 3px; }
.bento-card:focus-visible,
.guide-card:focus-visible,
.itin-media:focus-visible,
.duo-media:focus-visible { outline-offset: 4px; border-radius: var(--radius-card); }
.hero-dots button:focus-visible { outline-offset: 3px; }
.footer-social a:focus-visible { outline-offset: 4px; }

/* ============ Eyebrows ============ */

.eyebrow {
  font: 600 0.68rem/1 var(--font-body);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: 0.85rem;
}
.eyebrow-dark { color: var(--accent-soft); }
.eyebrow-light { color: oklch(1 0 0 / 0.72); }
/* No rules on the eyebrow: the label is the label. The orange one went at
   Enrique's request, and the grey companion went with it — a rule on one side
   only reads as something that failed to load. The value section's eyebrow is
   left-aligned with its heading now; Trending's stays centred with its own. */
.trending-section .eyebrow { justify-content: center; }

/* Inline links in body copy. Every component anchor carries a class and sets
   its own colour; these carried none, so they fell through to the browser's
   default #0000ee — a blue that is nowhere in this palette. Scoped with
   :not([class]) so the 200-odd component anchors are untouched.
   :not(nav li) as well: the anchor index under the hero is a list of bare
   <a> in <li>, so every one of its six labels came out underlined. A rule
   for prose has no business inside a navigation. */
p a:not([class]),
li:not(nav li) a:not([class]),
dd a:not([class]) {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(0.465 0.131 253 / 0.4);
  transition: text-decoration-color var(--t-med) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  p a:not([class]):hover,
  li:not(nav li) a:not([class]):hover,
  dd a:not([class]):hover { text-decoration-color: currentColor; }
}

/* Blocks whose copy is still a [PLACEHOLDER]. build.py marks them on every
   build, so the moment the real text lands the marker stops being written and
   the block comes back on its own. Left visible they read as an unfinished
   site rather than as reserved space. */
[data-tbc] { display: none !important; }

/* "Más adelante" in the client's category list: on the page as a plan, not as
   a live link. Muted ground, no photograph, and it is a <span>, so it is not
   focusable and cannot be clicked into a page that does not exist yet. */
.place-soon,
.place-soon {
  background: var(--brand-050);
  border: 1px dashed var(--line);
}
.place-soon > span { color: var(--ink-secondary); text-shadow: none; }
.place-note,

/* A grid of the same overlay card the rails use, so a listing and a rail show
   the same object. The reference puts the copy on the picture; the earlier
   panel kept them as two stacked halves. */
/* The section this grid lives in gets a wider container. Inside the standard
   1200px cap the four cards came out 258px on a 1440 screen, smaller than the
   photographs deserve. */
.wrap:has(> .tall-grid) { max-width: 1600px; }

.tall-grid {
  display: grid;
  /* Explicit counts rather than auto-fill: eight cards over two rows of four,
     so neither row is left with an orphan. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  /* Not stretch. Stretch hands each card a definite height, and then its
     aspect-ratio derives the WIDTH from that — so cards shrank inside their
     own columns and the two shapes came out 258 and 291 wide. Sized from the
     column instead, one ratio gives one size. */
  align-items: start;
}
@media (max-width: 1100px) { .tall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .tall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .tall-grid { grid-template-columns: 1fr; } }

/* Three cards, three columns. In the four-column default they filled three
   slots and left the fourth empty, so the row hung to one side under a
   centred heading. The wide container goes with it: the guide's prose above
   is 1200, and a 1600 row under it read as a different page. */
.tall-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wrap:has(> .tall-grid-3) { max-width: var(--wrap-max); }
@media (max-width: 900px) { .tall-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tall-grid-3 { grid-template-columns: 1fr; } }

/* ---------- Marks in article prose --------------------------------------
   A drawn mark beside each heading, so a guide can be scanned before it is
   read. It sits outside the measure on a wide screen and inline on a narrow
   one, and it never carries meaning the heading does not already carry. */
.prose h2 { display: flex; align-items: center; gap: 0.7rem; }
.prose-mark {
  flex: none;
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  color: var(--brand-600);
}
.prose-mark svg { width: 100%; height: 100%; }
/* The bullets become a mark of their own: a short rule in the accent, which
   lines the points up without pretending each one is a completed task. */
.prose ul, .article-body ul { list-style: none; padding-left: 0; }
.prose ul > li,
.article-body ul > li {
  position: relative;
  padding-left: 1.6rem;
}
.prose ul > li::before,
.article-body ul > li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 0.85rem; height: 2px;
  border-radius: 1px;
  background: var(--accent);
}



/* ============ Buttons & links ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: none; border-radius: var(--radius-btn);
  cursor: pointer; text-decoration: none;
  background: var(--stone); color: var(--on-dark);
  position: relative;
  transition: background-color 400ms var(--ease-out-expo),
              color 400ms var(--ease-out-expo),
              box-shadow 400ms var(--ease-out-expo),
              opacity 300ms var(--ease-out-expo);
}
.btn:active { opacity: 0.85; }
/* One hover law for every button: it darkens within its own colour, and a
   button with a ring fills with that ring's colour. Nothing changes hue on
   hover — a white button that turns blue reads as a different control. */
.btn-light {
  /* Off-white, not #fff: on a dark band pure white is 15.8:1 and reads as
     glare beside 5-9:1 copy. This is 12.9:1 — still the brightest thing in
     the band, without the hard edge. */
  background: var(--on-dark); color: var(--ink);
  box-shadow: none;
}
.btn-ghost {
  background: transparent; color: oklch(1 0 0 / 0.92);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.42);
}
.btn-whatsapp {
  background: var(--wa-green); color: oklch(1 0 0);
  box-shadow: none;
}
/* Outline variant for CTAs that sit inside editorial copy on a light ground,
   where a solid button would out-shout the paragraph it belongs to. */
.btn-outline {
  background: transparent; color: var(--brand-900);
  box-shadow: inset 0 0 0 1px var(--brand-900);
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { background: var(--brand-900); color: var(--on-dark); }
}
.btn-block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--brand-hover); }
  .btn-light:hover { background: var(--btn-light-hover); }
  .btn-ghost:hover {
    /* Fills with its own ring colour, as every bordered button here does —
       but as a wash, not a slab. Solid white made it a copy of the light
       button beside it. */
    background: oklch(1 0 0 / 0.18);
    color: var(--on-dark);
    box-shadow: inset 0 0 0 1px oklch(1 0 0);
  }
  /* Over photography a wash is lost against a bright frame, so there the
     inversion stays. */
  .hero .btn-ghost:hover,
  .page-hero .btn-ghost:hover,
  .final-cta .btn-ghost:hover {
    background: oklch(1 0 0); color: var(--ink);
    box-shadow: inset 0 0 0 1px oklch(1 0 0);
  }
  .btn-whatsapp:hover { background: oklch(0.46 0.12 152); }
}

/* Editorial link: rule that draws itself in on hover */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 600 0.72rem/1.2 var(--font-body);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand-600); text-decoration: none;
  padding-bottom: 0.4rem;
  position: relative;
}
.link-arrow::after {
  content: "\2192";
  font-size: 0.9rem;
  transition: transform 400ms var(--ease-out-expo);
}
.link-arrow::before {
  content: "";
  position: absolute; left: 0; bottom: 0; right: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease-out-expo);
  opacity: 0.45;
}
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover::after { transform: translateX(5px); }
  .link-arrow:hover::before { transform: scaleX(1); }
}
.link-arrow-dark { color: var(--brand-200); }

/* ============ Header — blanco fijo ============ */

/* Default: solid. Only a page that opts in with `body.has-hero` gets the
   transparent-over-photo treatment — otherwise light nav type would sit on a
   light page background and disappear. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: oklch(0.995 0.002 80 / 0.94);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
  transition: background-color 500ms var(--ease-out-expo),
              box-shadow 500ms var(--ease-out-expo),
              backdrop-filter 500ms var(--ease-out-expo);
}
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0.15 0.010 259 / 0.45), transparent);
  opacity: 0;
  transition: opacity 500ms var(--ease-out-expo);
  pointer-events: none;
}
/* Over the hero: transparent, light type, subtle scrim for legibility */
.has-hero .site-header:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.has-hero .site-header:not(.is-scrolled)::before { opacity: 1; }

.header-inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}
.brand-logo {
  height: 42px; width: auto;
  filter: none;
  transition: filter 500ms var(--ease-out-expo);
}
.has-hero .site-header:not(.is-scrolled) .brand-logo { filter: brightness(0) invert(1); }

.main-nav {
  display: flex;
  gap: 2.25rem;
  justify-content: center;
  align-items: center;
}
.main-nav a {
  font: 500 0.78rem/1 var(--font-body);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-body);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
  transition: color 400ms var(--ease-out-expo), opacity var(--t-med) ease-out;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.has-hero .site-header:not(.is-scrolled) .main-nav a { color: oklch(1 0 0 / 0.88); }
.main-nav a:hover { color: var(--brand-600); }
.has-hero .site-header:not(.is-scrolled) .main-nav a:hover { color: oklch(1 0 0); }
.main-nav a.is-active { font-weight: 600; color: var(--brand-600); }
.has-hero .site-header:not(.is-scrolled) .main-nav a.is-active { color: oklch(1 0 0); }
.main-nav a.is-active::after {
  content: "";
  position: absolute;
  bottom: -0.35rem;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: none;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover::after { transform: scaleX(1); }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header-actions .btn {
  padding: 0.7rem 1.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* Over the hero the CTA is an outline; on scroll it fills in */
.header-actions .btn-primary {
  background: var(--brand);
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px transparent;
}
.has-hero .site-header:not(.is-scrolled) .header-actions .btn-primary {
  background: transparent;
  color: oklch(1 0 0);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .header-actions .btn-primary:hover {
    background: var(--brand-hover);
    color: var(--on-dark);
  }
  .has-hero .site-header:not(.is-scrolled) .header-actions .btn-primary:hover {
    background: oklch(1 0 0);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px oklch(1 0 0);
  }
}
/* WhatsApp reads as a quiet secondary in the bar, not a green slab */
/* The header's WhatsApp is the same button as the one in the body — same
   green, same shape, only smaller. It used to be a grey text link, which made
   one action look like two different controls. */
.header-actions .btn-whatsapp { padding: 0.6rem 1.1rem; }

.nav-toggle {
  display: none; flex-direction: column; gap: 6px;
  background: none; border: none; cursor: pointer;
  min-width: 44px; min-height: 44px;
  padding: 11px;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  width: 24px; height: 1.5px; background: var(--ink);
  transition: transform var(--t-med) var(--ease-out-expo),
              background-color 400ms var(--ease-out-expo);
}
.has-hero .site-header:not(.is-scrolled) .nav-toggle span { background: oklch(1 0 0); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--bg-page);
  padding: 0.5rem var(--pad-x) 1.25rem;
  box-shadow: 0 1px 0 var(--line);
}
.mobile-menu a {
  font: 500 1rem/1 var(--font-body);
  color: var(--ink); text-decoration: none; padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a.is-active { color: var(--brand-600); font-weight: 600; }
.mobile-menu-cta {
  color: var(--brand-600);
  font-weight: 600;
}
.mobile-menu-wa { color: var(--wa-green); font-weight: 600; border-bottom: none; }
.mobile-menu.is-open { display: flex; }

/* items_wrap is '%3$s', so the <li> land here without a <ul> around them. As
   flex children they stay display:list-item and draw a bullet, which is not
   what the design has — reset it. */
.mobile-menu li { list-style: none; }

/* Indented items from Appearance > Menus. No disclosure on a phone: the panel
   does not exist at this width, so hiding these links behind a tap would make
   them unreachable rather than tidier. */
.mobile-menu .sub-menu {
  list-style: none; margin: 0; padding: 0 0 0 1rem;
}
.mobile-menu .sub-menu a {
  font: 400 0.92rem/1 var(--font-body);
  color: var(--ink-body);
}

/* ============ Hero — centrado ============ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  max-height: 1000px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity 1600ms var(--ease-out-expo);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Slow, barely-perceptible drift — cinematic rather than animated */
.hero-slide.is-active img { animation: kenburns 14s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.09); }
}
.hero-dots {
  position: absolute; bottom: 2.2rem; right: var(--pad-x);
  display: flex; gap: 0;
  z-index: 2;
}
.hero-dots button {
  width: 34px; height: 1px;
  border: none; box-sizing: content-box;
  /* Was a 34x1 target. The rule still reads as 1px; the padding makes the
     control 45px tall without moving it. */
  padding-block: 22px;
  background-clip: content-box;
  cursor: pointer;
  margin-left: 10px;
  position: relative;
  background-color: oklch(1 0 0 / 0.35);
  transition: background-color 500ms var(--ease-out-expo);
}
/* 44px touch target without growing the painted line */
.hero-dots button::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
.hero-dots button.is-active { background-color: oklch(1 0 0); }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      oklch(0.15 0.010 259 / 0.30) 0%,
      oklch(0.15 0.010 259 / 0.05) 35%,
      oklch(0.13 0.012 259 / 0.62) 78%,
      oklch(0.12 0.012 259 / 0.82) 100%);
}
.hero-content {
  position: relative; width: 100%;
  text-align: left;
  color: var(--on-dark);
  padding-bottom: clamp(4.5rem, 9vh, 7rem);
  z-index: 1;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Staged entrance — slow, sequenced, no bounce */
.hero-content .eyebrow { animation: rise 1100ms var(--ease-out-expo) 150ms both; }
.hero-content h1, .page-hero h1 { animation: rise 1200ms var(--ease-out-expo) 300ms both; }
.hero-sub { animation: rise 1200ms var(--ease-out-expo) 520ms both; }
.hero-actions { animation: rise 1200ms var(--ease-out-expo) 700ms both; }
.page-hero .crumb { animation: rise 900ms var(--ease-out-expo) both; }

.hero-content .eyebrow {
  color: oklch(1 0 0 / 0.78);
  margin-bottom: 1.5rem;
}
.hero-content h1 {
  font-size: clamp(2.9rem, 7vw, 5.4rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: oklch(1 0 0);
  max-width: 15ch;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 40px oklch(0.12 0.01 55 / 0.35);
}
.hero-content h1 em { color: var(--brand-200); }
.hero-sub {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.65;
  color: oklch(1 0 0 / 0.82);
  max-width: 44ch;
  margin-inline: 0;
  margin-bottom: 2.5rem;
}
.hero-actions { display: flex; justify-content: flex-start; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Scroll cue */
@keyframes cueDrop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  75%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

.hero-pause {
  position: absolute; bottom: 2.2rem; left: var(--pad-x);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid oklch(1 0 0 / 0.28);
  border-radius: 50%;
  cursor: pointer; color: oklch(1 0 0 / 0.7);
  z-index: 2;
  transition: border-color 400ms var(--ease-out-expo),
              color 400ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .hero-pause:hover { border-color: oklch(1 0 0 / 0.7); color: oklch(1 0 0); }
}
.hero-caption {
  position: absolute; bottom: 2.55rem; right: calc(var(--pad-x) + 190px);
  font: 500 0.68rem/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(1 0 0 / 0.45);
  z-index: 2;
}

/* ============ Trust bar ============ */

.trust {
  background: var(--sand);
  position: relative;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(2.75rem, 5vw, 4rem);
  gap: 2rem;
}
.trust-item {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 0.6rem;
  position: relative;
}
/* Hairline separators, not boxes */
.trust-item + .trust-item::before {
  content: "";
  position: absolute; left: -1rem; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 2.6rem;
  background: var(--line);
}
.trust-figure {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 430;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  display: inline-flex; align-items: baseline; gap: 0.1em;
  font-variant-numeric: tabular-nums;
}
.trust-figure-text {
  font-weight: 500;
  color: var(--brand-600);
}
.trust-sup {
  font-size: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--brand-600);
  align-self: flex-start;
  margin-top: 0.35em;
}
.trust-star {
  font-size: 0.42em;
  /* --accent-soft is for dark grounds; on sand it is 2.17:1. */
  color: var(--accent);
  margin-left: 0.15em;
  align-self: center;
}
.trust-label {
  font: 500 0.76rem/1.4 var(--font-body);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: 16ch;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============ Sections ============ */

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section-sand { background: var(--sand); }

/* Asymmetric editorial section header: title left, lead right */
/* u-center: one centred column. Without this the two-column grid above puts
   the eyebrow in one cell and the heading in the other, which is what left the
   inspiration heading sitting to the right of its own eyebrow. */
.section-head.u-center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  /* The 5vw gap is the space between two columns. Stacked it put 82px between
     an eyebrow and the heading it introduces. */
  row-gap: clamp(0.5rem, 1vw, 0.9rem);
}
.section-head.u-center .eyebrow { margin-bottom: 0; }
.section-head.u-center h2 { margin-bottom: 0; }

.section-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.section-head-main h2 { margin-bottom: 0; }
.section-head-lead {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-body);
  max-width: 44ch;
  padding-bottom: 0.35rem;
}
.how .section-head,
.duo-dark .section-head { border-bottom-color: oklch(1 0 0 / 0.14); }
.how .section-head-lead,
.duo-dark .section-head-lead { color: var(--on-dark-body); }

/* ============ Bento — Formas de viajar ============ */

/* Asymmetric mosaic: one tall feature, three supporting cells */
.bento {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: clamp(190px, 23vw, 275px) clamp(190px, 23vw, 275px);
  gap: clamp(0.5rem, 1vw, 0.9rem);
}
.bento-feature { grid-column: 1; grid-row: 1 / span 2; }
.bento-wide { grid-column: 2 / span 2; grid-row: 2; }

.bento-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--on-dark);
  display: block;
  box-shadow: none;
  background: var(--stone-deep);
}
.bento-card img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: auto;
  transition: transform 1400ms var(--ease-out-expo),
              opacity 700ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .bento-card:hover img { transform: scale(1.06); opacity: 0.88; }
  .bento-card:hover .bento-cue { opacity: 1; transform: none; }
  .bento-card:hover .bento-overlay::before { opacity: 1; }
}
.bento-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.25rem, 2vw, 1.9rem);
}
.bento-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
    oklch(0.14 0.012 259 / 0.90) 0%,
    oklch(0.14 0.012 259 / 0.42) 45%,
    oklch(0.14 0.012 259 / 0.06) 100%);
  opacity: 0.9;
  transition: opacity 700ms var(--ease-out-expo);
}
.bento-overlay > * { position: relative; z-index: 1; }
.bento-overlay h3 {
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 430;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
  text-shadow: none;
  margin-bottom: 0.4rem;
}
.bento-feature .bento-overlay h3 { font-size: clamp(1.7rem, 2.7vw, 2.35rem); }
.bento-overlay p {
  font-size: 0.9rem;
  color: oklch(1 0 0 / 0.78);
  margin-top: 0; line-height: 1.55;
  max-width: 32ch;
}
.bento-cue {
  display: inline-block;
  margin-top: 1.1rem;
  font: 600 0.66rem/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(1 0 0);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms var(--ease-out-expo),
              transform 500ms var(--ease-out-expo);
}
.bento-cue::after { content: " \2192"; }
/* Touch devices never hover — keep the cue visible there */
@media (hover: none) {
  .bento-cue { opacity: 0.85; transform: none; }
}


/* ============ Itinerarios — zigzag ============ */

/* Image-dominant, alternating. The photograph carries the row;
   the copy sits in a narrow column beside it. */
.itin {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.itin:last-child { margin-bottom: 0; }
.itin-reverse { grid-template-columns: 1fr 1.55fr; }
.itin-reverse .itin-media { order: 2; }
.itin-reverse .itin-body { order: 1; }

.itin-media {
  display: block; overflow: hidden;
  border-radius: var(--radius-lg);
  position: relative;
  background: var(--sand);
}
.itin-media img {
  height: clamp(300px, 40vw, 520px); width: 100%; object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 1400ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .itin-media:hover img { transform: scale(1.045); }
}

.itin-meta {
  font: 500 0.75rem/1.4 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* Metadata as a tracked rule above the title */
.itin-meta-clean {
  font: 500 0.7rem/1.5 var(--font-body);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.itin-body h3 {
  font-size: clamp(1.6rem, 2.7vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin-top: 0;
  margin-bottom: 0.9rem;
}
.itin-desc {
  font-size: 1rem; color: var(--ink-body);
  margin-top: 0; max-width: 38ch; line-height: 1.75;
}
.itin-body .link-arrow { margin-top: 1.6rem; }

/* ============ Proceso — banda oscura ============ */

.how {
  background: var(--ground-dark);
  padding-block: var(--section-y);
  text-align: left;
}
.how h2 { color: var(--on-dark); }
.how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: none; margin-inline: 0;
  position: relative;
  list-style: none; padding: 0;
  counter-reset: none;
}
.how-steps-4 { grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.how-steps-4 .how-step p { max-width: 28ch; }
.how-steps-4 .how-num { margin-bottom: 0; }

.how-step {
  position: relative;
  padding-top: 0;
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.how-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  font-weight: 430;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--on-dark);
  display: block;
  /* No bottom margin: the numeral shares a row with the icon now, and this
     margin was padding the flex line out to 84px so the two never centred. */
  margin-bottom: 0;
  position: relative;
  font-variant-numeric: tabular-nums;
  transition: color 600ms var(--ease-out-expo);
}
/* Numeral and icon read as one marker on a single line. */
.how-marker {
  display: flex; align-items: center;
  gap: clamp(0.7rem, 1.4vw, 1rem);
  margin-bottom: 1.1rem;
}
.how-icon {
  display: block;
  /* The markup ships 28px, which next to a 59px numeral read as a footnote.
     Sized here so it tracks the numeral's own clamp instead of staying fixed. */
  width: clamp(1.9rem, 3.3vw, 2.9rem);
  height: clamp(1.9rem, 3.3vw, 2.9rem);
  /* Was the celeste at 0.75 opacity, which is what made it look like a ghost
     of an icon. Full strength, and the same off-white as the numeral so the
     marker reads as one thing rather than two colours side by side. */
  color: var(--on-dark);
  transition: transform 600ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .how-step:hover .how-icon { transform: translateY(-3px); }
}
.how-step h3 {
  font-family: var(--font-display);
  font-weight: 430;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  letter-spacing: -0.02em;
  color: var(--on-dark);
  margin-bottom: 0.6rem;
}
.how-step p {
  font-size: 0.95rem; color: var(--on-dark-muted);
  line-height: 1.7;
  margin-top: 0; margin-inline: 0; max-width: 32ch;
}

/* ============ Quiénes somos / Compromiso ============ */

.duo-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.75rem, 6vw, 5.5rem);
  align-items: stretch;
}
.duo-grid > .duo-body { align-self: center; }
/* Starts at 681px, not 820: the duo only stacks below 680, so between 681 and
   819 the media had no capped height and stretched to the full row — 267x892,
   a ratio of 0.30, which sliced the subject out of a landscape photo. */
@media (min-width: 681px) {
  /* The media had a fixed height and sat at the top of its row, so where the
     text column runs long — the responsible-travel block is 755px against a
     435px photo — it left a 320px hole underneath. Centring splits whatever is
     left over, and the taller cap closes most of it.

     Stretching to the full row instead was the other option and it is wrong
     here: it would take this crop from 1.10 to 0.63 and cut the people at the
     edges out of a landscape source. */
  .duo-media { height: clamp(320px, 38vw, 540px); align-self: center; }
  .duo-media img { height: 100%; object-fit: cover; }
}

/* Wide enough that filling the row is safe: the photo becomes a full-height
   panel beside the text instead of a small picture floating in the middle of
   it, which is what made it read as isolated.

   Not below 1100px. There the media column is narrow while the text column is
   at its tallest, so filling would drive the crop to 0.30-0.43 and cut the
   subject out of a landscape source. Measured: 0.58 at 1100, 0.63 at 1280. */
@media (min-width: 1100px) {
  .duo-media { height: auto; align-self: stretch; }
  .duo-media img { height: 100%; }
}
.duo-media {
  display: block; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand);
}
.duo-media img {
  width: 100%; height: clamp(360px, 46vw, 620px); object-fit: cover;
  aspect-ratio: 3 / 4;
  transition: transform 1400ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .duo-media:hover img { transform: scale(1.04); }
}
.duo-body h2 { margin-bottom: 1.25rem; }
.duo-body > p:not(.eyebrow) {
  font-size: 1.02rem; color: var(--ink-body);
  line-height: 1.8; max-width: 44ch;
}
.duo-body .link-arrow { margin-top: 2rem; }

.stats-row {
  display: flex; gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.stat strong {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 430;
  display: block; line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font: 500 0.68rem/1.4 var(--font-body);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-muted);
  display: block; max-width: 13ch;
}

.duo-dark {
  background: var(--ground-dark);
  padding-block: var(--section-y);
}
.duo-dark .stats-row { border-top-color: oklch(1 0 0 / 0.16); }
.duo-dark .stat strong { color: var(--on-dark); }
.duo-dark .stat span { color: var(--on-dark-muted); }

/* ============ Wave dividers ============ */

.duo-dark .duo-body h2 { color: var(--on-dark); }
.duo-dark .duo-body > p:not(.eyebrow) { color: var(--on-dark-body); }

/* ============ Guías — sección clara ============ */

.guides-section {
  /* The larger rhythm: this band follows the testimonials, which uses it too,
     and at --section-y the heading sat close to the top edge. */
  padding-block: var(--section-y-lg);
  background: var(--bg-page);
  border-top: 1px solid var(--line);
}
.guides-section h2 { color: var(--ink); }
.section-intro::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400), transparent);
  margin: 1.5rem auto 0;
  border-radius: 2px;
}
/* Masthead-style filter row: tracked type on a rule, not pill buttons */
.guide-categories {
  display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.guide-filter {
  font: 600 0.7rem/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0;
  border: none;
  background: transparent; color: var(--ink-muted);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  transition: color 350ms var(--ease-out-expo);
}
.guide-filter::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1.05rem;
  height: 1px; background: var(--brand-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform 450ms var(--ease-out-expo);
}
.guide-filter.is-active { color: var(--ink); }
.guide-filter.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .guide-filter:hover { color: var(--brand-600); }
}
.guide-card[hidden] { display: none; }

.guides {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
/* ---------- Ways to travel, en experiencias.html ------------------------
   Esta rejilla se queda como estaba: la cartilla alta de cuatro columnas que
   ya habiamos afinado. Las de abajo son las unicas piezas que la sostienen;
   el resto del sistema .trip-card se retiro porque nadie mas lo usaba. */
/* Wider than a rail card, so the description has somewhere to go. Scoped to
   the grid so it beats .tall-card's own ratio, which is declared later. */
.tall-grid > .tall-card-wide { aspect-ratio: 4 / 5.2; }
.tall-card-wide h3 { font-size: clamp(0.98rem, 1.3vw, 1.15rem); }
.tall-card-wide .tall-card-desc { font-size: 0.8rem; }
.tall-card-desc {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: oklch(1 0 0 / 0.88);
}

.trip-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.trip-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.22;
  margin: 0.95rem 0 0.4rem;
}
.trip-card-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-body);
  margin-bottom: 0.7rem;
}
.trip-card-soon { cursor: default; border-style: dashed; }
.trip-card-soon .trip-card-title { color: var(--ink-secondary); }
/* Coming-soon tiles are the same card, without a photograph to sit on: same
   ratio, same corners, so a row reads as one set rather than two shapes.
   .tall-grid aligns to start, not stretch, so the ratio sizes the height from
   the column width here and does not run backwards. */
.tall-grid > .trip-card-soon {
  aspect-ratio: 4 / 5.2;
  display: grid; place-items: center; align-content: center;
  gap: 0.4rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  background: var(--brand-050);
}
.tall-grid > .trip-card-soon .trip-card-title {
  color: var(--ink); font-size: clamp(0.98rem, 1.3vw, 1.15rem); margin: 0;
  padding: 0;
}
.tall-grid > .trip-card-soon .trip-card-desc {
  font-size: 0.8rem; color: var(--ink-body); margin: 0; padding: 0;
}
.tall-grid > .trip-card-soon::after {
  content: "Coming soon";
  font: 600 0.58rem/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.35rem;
}

/* ---------- La cartilla ------------------------------------------------
   One card, two contents: a guide and an experience. They were two
   byte-identical blocks under two names, plus a third (.trip-card) that
   differed by 2px of corner radius. Photo on top rather than behind the
   copy: these carry a tag, a title, a description and a cue, which is more
   text than sits legibly over photography the way the role cards do. */
.guide-card,
.ideacard {
  display: flex; flex-direction: column;
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;                 /* keeps the photo inside the radius */
  text-decoration: none; color: inherit;
  transition: border-color var(--t-med) var(--ease-out-expo),
              box-shadow var(--t-med) var(--ease-out-expo);
}
.guide-card-img,
.ideacard-img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10; height: auto;
  object-fit: cover;
  transition: transform 700ms var(--ease-out-expo);
}
.guide-card-body,
.ideacard-body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.35rem, 2.4vw, 1.8rem);
}
.guide-card-body h3,
.ideacard h3 {
  font-size: 1.15rem; line-height: 1.25;
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.guide-card-body p,
.ideacard-desc {
  font-size: 0.9rem; line-height: 1.6;
  color: var(--ink-body);
  margin: 0 0 1.2rem;
}
/* One category chip. Navy on amber is 8.36:1; the guide tag used to be
   coral text with no fill, which made two cards out of one card. */
.guide-tag,
.ideacard-tag {
  align-self: flex-start;
  position: static;
  font: 600 0.62rem/1 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--accent-amber);
  color: var(--brand-900);
  padding: 0.34rem 0.7rem;
  border-radius: var(--radius-btn);
  margin-bottom: 1rem;
}
/* The deck calls this the "itinerary angle": the route hint under the copy. */
.ideacard-angle {
  font-size: 0.78rem; line-height: 1.5;
  /* --ink-muted lands at 4.22:1 here, under the 4.5 bar for text this size. */
  color: var(--ink-secondary);
  padding-top: 0.9rem; margin-bottom: 1.2rem;
  border-top: 1px solid var(--line-soft);
}
.guide-card-cue,
.ideacard-cue {
  margin-top: auto;
  font: 600 0.82rem/1 var(--font-body);
  color: var(--brand-900);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.guide-card-cue::after,
.ideacard-cue::after {
  content: ""; width: 0.9rem; height: 1px;
  background: var(--accent-orange);
  transition: width var(--t-med) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover,
  .ideacard:hover { border-color: var(--brand-400); box-shadow: var(--shadow-sm); }
  .guide-card:hover .guide-card-cue::after,
  .ideacard:hover .ideacard-cue::after { width: 1.6rem; }
  .guide-card:hover .guide-card-img,
  .ideacard:hover .ideacard-img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .guide-card-img, .ideacard-img { transition: none; }
  .guide-card:hover .guide-card-img,
  .ideacard:hover .ideacard-img { transform: none; }
}
.guide-card:focus-visible,
.ideacard:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 3px; }
.guide-card[style*="--d:.1s"] { animation-delay: 100ms; }
.guide-card[style*="--d:.2s"] { animation-delay: 200ms; }

/* Same card, nothing to click yet: no photo, a dashed edge, its own label. */
.ideacard-soon {
  position: relative;
  border-style: dashed;
  background: var(--brand-050);
  cursor: default;
}
/* Holds the space the photograph would have taken, so the card keeps the
   height of the ones beside it at every width. A percentage padding resolves
   against this card's own width. aspect-ratio does not: on a stretched grid
   item it runs backwards and derives the WIDTH from the row height, which
   blew these two 75px out of their columns. */
.ideacard-soon::before { content: ""; display: block; padding-top: 62.5%; }
.ideacard-soon::after {
  content: "Coming soon";
  position: absolute; left: 0; right: 0; top: 0;
  padding-top: calc(31.25% - 0.5em);   /* half the block above: centred in it */
  text-align: center;
  font: 600 0.62rem/1 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-secondary);
}
.ideacard-soon .ideacard-desc { margin: 0; }

.guide-card > img {
  width: 100%;
  height: clamp(230px, 26vw, 320px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 0;
  transition: transform 1400ms var(--ease-out-expo),
              opacity 600ms var(--ease-out-expo);
}
.guide-card h3 {
  font: 430 clamp(1.15rem, 1.7vw, 1.4rem)/1.28 var(--font-display);
  letter-spacing: -0.02em;
  padding: 0.7rem 0 0;
  margin: 0;
  color: var(--ink);
  transition: color 350ms var(--ease-out-expo);
}
/* The description grows so the cue is pushed to the foot of the card and every
   card in a row lines its cue up with the others. Sizing lives on
   .guide-card-body p, which this used to override. */
.guide-card-body p { flex-grow: 1; }
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover > img { transform: scale(1.035); opacity: 0.94; }
  .guide-card:hover h3 { color: var(--brand-600); }
}

/* The "see everything" link belongs to the set above it, so it sits closer to
   that set than to the next section. At 3rem it landed 112px under the rail
   with 128px below it — equidistant, which reads as belonging to neither. */
.guides-more { margin-top: clamp(1rem, 1.5vw, 1.25rem); text-align: left; }

/* ============ CTA final — azul, 2 columnas ============ */

/* Conversion moment: photograph carries it, form stays plainly usable */
.final-cta {
  position: relative;
  background: var(--ground-deep);
  border-top: none;
  padding-block: var(--section-y-lg);
  overflow: hidden;
  isolation: isolate;
}
.final-cta-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: -2;
}
.final-cta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    oklch(0.14 0.012 259 / 0.94) 0%,
    oklch(0.14 0.012 259 / 0.80) 48%,
    oklch(0.14 0.012 259 / 0.62) 100%);
  z-index: -1;
}
.final-cta-grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.final-cta h2 {
  color: var(--on-dark);
  margin-bottom: 1.1rem;
  max-width: 14ch;
}
.final-cta-sub {
  font-size: 1.05rem; color: var(--on-dark-body);
  line-height: 1.75;
  margin-bottom: 2rem; max-width: 40ch;
}
.final-cta-list {
  list-style: none; margin: 0 0 2.25rem; padding: 0;
  display: grid; gap: 0.85rem;
}
.final-cta-list li {
  position: relative; padding-left: 1.75rem;
  font: 500 0.85rem/1.5 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--on-dark-body);
}
.final-cta-list li::before {
  content: "\2014"; position: absolute; left: 0; top: 0;
  width: auto; height: auto; border-radius: 0;
  background: none;
  display: inline; align-items: initial; justify-content: initial;
  font-size: 0.85rem; font-weight: 400; color: var(--brand-200);
}
.trip-form-card {
  background: oklch(1 0 0);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 30px 70px oklch(0.1 0.01 55 / 0.4);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ============ Formularios ============ */

.trip-form { display: grid; gap: 1rem; }
.trip-form label {
  display: grid; gap: 0.4rem;
  font: 600 0.8rem/1.2 var(--font-body);
  color: var(--ink);
  text-align: left;
}
.trip-form input,
.trip-form select,
.trip-form textarea {
  border-color: var(--line);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.trip-form input:invalid,
.trip-form select:invalid,
.trip-form textarea:invalid {
  border-color: oklch(0.55 0.2 25);
  box-shadow: 0 0 0 3px oklch(0.55 0.2 25 / 0.12);
}
.trip-form input,
.trip-form textarea,
.trip-form select {
  font: 400 0.95rem/1.4 var(--font-body);
  color: var(--ink);
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: oklch(1 0 0);
  transition: border-color var(--t-fast) var(--ease-out-expo);
}
.trip-form select { cursor: pointer; }
.trip-form select:invalid { color: var(--ink-muted); }
.trip-form input:focus,
.trip-form textarea:focus,
.trip-form select:focus {
  outline: none; border-color: var(--blue-brand);
  box-shadow: 0 0 0 3px oklch(0.45 0.12 250 / 0.12);
}
.trip-form textarea { resize: vertical; }
.form-success {
  font: 600 0.9rem/1.4 var(--font-body); color: oklch(0.45 0.14 155);
  background: oklch(0.95 0.04 155);
  border-radius: var(--radius-btn);
  padding: 0.75rem 1rem;
  display: flex; align-items: center; gap: 0.5rem;
  animation: fadeUp 300ms var(--ease-out-expo) both;
}
.form-success::before {
  content: "\2713";
  width: 22px; height: 22px; border-radius: 50%;
  background: oklch(0.45 0.14 155);
  color: oklch(1 0 0); font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.trip-form-card .form-success { margin-top: 0.4rem; }

/* ============ Certificaciones ============ */

.certs {
  border-top: 1px solid var(--line-soft);
  /* Was its own clamp, which put the seam below it at 218px — the only gap on
     the site that was not a combination of the three rhythm tokens. */
  padding-block: var(--section-y-sm);
  text-align: center;
  background: var(--bg-page);
}
.certs-title {
  font: 500 0.68rem/1 var(--font-body);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 auto 2.25rem;
}
.certs-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.certs-track {
  display: flex; align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  width: max-content;
  padding-right: clamp(2rem, 5vw, 3.5rem);
  animation: marquee 32s linear infinite;
}
.certs-track img {
  height: 44px; width: auto;
  filter: grayscale(1); opacity: 0.4;
  transition: filter 500ms var(--ease-out-expo),
              opacity 500ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .certs-carousel:hover .certs-track { animation-play-state: paused; }
  .certs-track img:hover { filter: none; opacity: 1; }
}

/* A mark beside the headings of a guide.
   The prototype draws a different icon per heading, chosen by hand. Content
   written in the editor cannot carry those, so a single accent mark stands in
   and keeps the rhythm of the column. :has() means a hand-authored
   .prose-mark still wins where one exists. */
.prose h2:not(:has(.prose-mark))::before {
  content: "";
  flex: none;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: var(--brand-600);
  opacity: .55;
}

/* The itinerary's section blocks, while they are being edited.
   The front end draws them from the render callbacks and needs none of this;
   these rules only stop the editor canvas from showing a wall of unstyled
   fields where the page will have sections. */
.aap-section-edit {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  margin-block: 1rem;
  background: var(--bg-page);
}
.aap-section-edit .section-head,
.aap-section-edit .faq-head { margin-bottom: 1rem; }

/* A section previewed by the server. It renders at the page's own width
   inside a canvas that is narrower, so it is scaled down rather than allowed
   to overflow — the point is to recognise the section, not to read it. */
.aap-preview {
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.aap-preview .wrap { padding-inline: clamp(1rem, 4%, 2rem); }
.aap-preview .hero { min-height: 320px; }

/* The block's name, on the block. A stack of section blocks is unreadable
   without it: every one is a heading and some fields, and they look alike
   until you know which is which. */
.aap-block-label {
  display: block;
  margin: -0.35rem 0 .9rem;
  font: 600 .68rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.aap-block-label em {
  display: inline;
  margin-left: .5rem;
  font: 400 .72rem/1 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
.aap-row-edit {
  border-left: 3px solid var(--line);
  padding-left: .9rem;
  margin-block: .75rem;
}
.aap-row-edit h3 { margin: 0 0 .25rem; }
.aap-includes-edit {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.aap-price-row {
  border-top: 1px solid #dcdcde;
  padding-top: .75rem; margin-top: .75rem;
}

/* A block that is only a position on the page: the reviews, the
   accreditations. There is nothing to edit inside them, so the editor shows
   what they are and where they will sit rather than a blank box. */
.aap-placed {
  text-align: center;
  color: var(--ink-muted);
}
.aap-placed strong { display: block; color: var(--ink); }
.aap-placed p { margin: .35rem 0 0; font-size: .9rem; }

/* The photograph trio, while it is being edited. On the front end the block
   renders .guide-gallery and needs nothing here. */
.aap-gallery-preview {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.aap-gallery-preview img {
  width: 120px; height: 90px; object-fit: cover; border-radius: 6px;
}

/* ============ Block editor content ============
   A page is a stack of blocks, and two kinds of thing sit in that stack.

   A SECTION block draws its own <section> with a .wrap inside, exactly as a
   template would, so it has to be left alone — constraining it here was
   cutting the hero, the trust bar and every band on the page down to the text
   column, which is not a subtle bug and was mine.

   A CORE block — a paragraph somebody typed, a heading, a list — has no
   wrapper of its own, so it gets the reading measure here.

   Written the way round that makes the SECTIONS the default-free case, because
   any section block added later is a <section> and inherits the right
   behaviour without anybody remembering to add it to a list. */

.page-blocks > * {
  max-width: calc(var(--wrap-text) + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* Everything the theme draws as a section owns its own width and spacing. */
.page-blocks > section,
.page-blocks > .alignfull {
  max-width: none;
  margin-inline: 0;
  margin-block: 0;
  padding-inline: 0;
}

/* Core blocks that are pictures rather than prose get the wide measure. */
.page-blocks > .wp-block-image,
.page-blocks > .wp-block-gallery,
.page-blocks > .wp-block-columns,
.page-blocks > .wp-block-media-text,
.page-blocks > .wp-block-embed,
.page-blocks > .guide-gallery,
.page-blocks > .alignwide { max-width: var(--wrap-max); }

/* The editor renders the same markup inside its own canvas, where there is no
   .page-blocks wrapper — these keep a block from touching the canvas edge. */
.editor-styles-wrapper .cta-band { border-radius: var(--radius-lg); }
.aap-block-empty {
  padding: 1.25rem; border: 1px dashed var(--line);
  border-radius: var(--radius-lg); color: var(--ink-muted);
  font-size: .92rem; text-align: center;
}

/* ============ Footer — oscuro ============ */

.site-footer {
  background: var(--bg-dark);
  color: var(--on-dark-muted);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  font-size: 0.85rem;
}
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 2rem); flex-wrap: wrap;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid oklch(1 0 0 / 0.1);
}
.footer-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400; line-height: 1.25;
  color: var(--on-dark);
}
.footer-tagline em { font-weight: 600; color: var(--brand-200); }
.footer-main {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr;
  gap: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  align-items: start;
}
@media (max-width: 1100px) {
  /* Brand across the top, the four columns in a row beneath it. */
  .footer-main { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { grid-column: 1 / -1; max-width: 46ch; }
}
@media (max-width: 760px) { .footer-main { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .footer-main { grid-template-columns: 1fr; } }
.footer-brand img { height: 44px; width: auto; margin-bottom: 0.9rem; }
.footer-brand p { color: var(--on-dark-muted); line-height: 1.9; }
.footer-col { display: grid; gap: 0.35rem; align-content: start; }
.footer-col h2 {
  font: 600 0.78rem/1 var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark); margin: 0 0 0.6rem;
}
.footer-col a {
  color: var(--on-dark-muted); text-decoration: none;
  line-height: 1.7;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: color var(--t-fast) var(--ease-out-expo);
}
.footer-col a svg { flex-shrink: 0; opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
}
/* Widget area — Appearance > Widgets, "Footer — widgets".
   auto-fit means the row adapts to however many widgets the client adds,
   so it never leaves an empty cell or spills into an orphan second row. */
.footer-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid oklch(1 0 0 / 0.1);
}
.footer-widgets .widget-title {
  font: 600 0.78rem/1 var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark); margin: 0 0 0.6rem;
}
.footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets li { line-height: 2.1; }
.footer-widgets a { color: var(--on-dark-muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .footer-widgets a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
}
.footer-widgets p { line-height: 1.9; margin: 0 0 0.6rem; }
.footer-widgets img { max-width: 100%; height: auto; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid oklch(1 0 0 / 0.1);
  font-size: 0.75rem;
}
.footer-social { display: flex; gap: 0.9rem; }
.footer-social a {
  color: var(--on-dark-muted);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0.5rem;
  transition: color var(--t-fast) var(--ease-out-expo),
              transform var(--t-fast) var(--ease-out-expo);
}
.footer-social a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover { color: var(--on-dark); transform: translateY(-2px); }
}

/* ============ Capa de contacto persistente ============ */

.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--wa-green); color: white;
  box-shadow:
    0 4px 14px oklch(0.72 0.17 150 / 0.3),
    0 0 0 0 oklch(0.72 0.17 150 / 0.25);
  transition: transform var(--t-med) var(--ease-out-expo),
              box-shadow var(--t-med) var(--ease-out-expo);
  animation: waFloat 600ms var(--ease-out-expo) 1.5s both, waPulse 3s ease-in-out 2.5s infinite;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 14px oklch(0.72 0.17 150 / 0.3), 0 0 0 0 oklch(0.72 0.17 150 / 0.25); }
  50% { box-shadow: 0 4px 14px oklch(0.72 0.17 150 / 0.3), 0 0 0 8px oklch(0.72 0.17 150 / 0); }
}
@keyframes waFloat {
  from { opacity: 0; transform: scale(0.8) translateY(12px); }
  to { opacity: 1; transform: none; }
}
.wa-float:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover { transform: translateY(-2px); }
}

.mobile-bar {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 40;
  grid-template-columns: 1fr 1.4fr; gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px oklch(0.2 0.04 250 / 0.08);
}
.mobile-bar a, .mobile-bar button {
  font: 600 0.9rem/1 var(--font-body);
  padding: 0.95rem; border: none;
  text-align: center; text-decoration: none; cursor: pointer;
}
.mobile-bar-wa { background: oklch(1 0 0); color: var(--wa-green); }
.mobile-bar-cta { background: var(--navy); color: var(--on-dark); }
.mobile-bar-cta:active, .mobile-bar-wa:active { opacity: 0.85; }

/* ============ Drawer ============ */

.drawer-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(0.15 0.04 250 / 0.5);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out-expo);
}
.drawer-overlay.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(420px, 100vw);
  background: var(--bg-page);
  padding: 3rem 2rem 2rem;
  overflow-y: auto;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  transform: translateX(100%);
  transition: transform 280ms var(--ease-out-expo);
}
.drawer.is-open { transform: translateX(0); }
.drawer h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.drawer-sub { color: var(--ink-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; }
.drawer-close {
  position: absolute; top: 0.6rem; right: 0.6rem;
  font-size: 1.7rem; line-height: 1;
  background: none; border: none; cursor: pointer; color: var(--ink-muted);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--t-fast) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .drawer-close:hover { color: var(--ink); }
}
.drawer-wa {
  display: block; margin-top: 1.25rem;
  font: 600 0.88rem/1.3 var(--font-body);
  color: var(--wa-green); text-decoration: none;
}

/* ============ Destinations ============ */

.dest-feature {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
.dest-feature-media {
  display: block; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.dest-feature-media img {
  width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover;
  transition: transform 1400ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .dest-feature-media:hover img { transform: scale(1.04); }
}
.dest-feature-body h3 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.dest-feature-body > p {
  font-size: 1.02rem; line-height: 1.8;
  color: var(--ink-body); max-width: 42ch;
}
.dest-facts {
  list-style: none; margin: 2rem 0 0; padding: 1.75rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; gap: clamp(1.5rem, 3vw, 2.75rem); flex-wrap: wrap;
}
.dest-facts li { display: flex; flex-direction: column; gap: 0.35rem; }
.dest-facts span {
  font: 500 0.64rem/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.dest-facts strong {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 430; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Mosaic: one tall, one wide, the rest even — deliberately not a uniform grid */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(230px, 26vw, 300px);
  gap: clamp(0.6rem, 1.1vw, 1rem);
}
/* Only used where the card count tiles the grid — see destinos.html */
.dest-card-tall { grid-column: 1; grid-row: 1 / span 2; }
.dest-card-wide { grid-column: 2 / span 2; }
/* A grid with no tall card should not inherit the two-row height */
.dest-grid:not(:has(.dest-card-tall)) { grid-auto-rows: clamp(260px, 28vw, 340px); }

.dest-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ground-deep);
  text-decoration: none; color: var(--on-dark);
}
.dest-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1400ms var(--ease-out-expo),
              opacity 700ms var(--ease-out-expo);
}
.dest-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
    oklch(0.15 0.012 259 / 0.92) 0%,
    oklch(0.15 0.012 259 / 0.44) 52%,
    oklch(0.15 0.012 259 / 0.05) 100%);
}
@media (hover: hover) and (pointer: fine) {
  .dest-card:hover img { transform: scale(1.06); opacity: 0.9; }
  .dest-card:hover .dest-card-cue { opacity: 1; transform: none; }
}
.dest-card-body {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: clamp(1.25rem, 2vw, 1.9rem);
  display: flex; flex-direction: column;
}
.dest-card-meta {
  font: 500 0.64rem/1 var(--font-body);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: oklch(1 0 0 / 0.66);
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.dest-card-body h3 {
  font-family: var(--font-display);
  font-weight: 430;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--on-dark);
  margin-bottom: 0.4rem;
}
.dest-card-tall .dest-card-body h3 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); }
.dest-card-body p {
  font-size: 0.9rem; line-height: 1.6;
  color: oklch(1 0 0 / 0.78);
  max-width: 36ch;
}
.dest-card-cue {
  display: inline-block; margin-top: 1rem;
  font: 600 0.64rem/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(1 0 0);
  opacity: 0; transform: translateY(6px);
  transition: opacity 500ms var(--ease-out-expo),
              transform 500ms var(--ease-out-expo);
}
.dest-card-cue::after { content: " \2192"; }
@media (hover: none) { .dest-card-cue { opacity: 0.85; transform: none; } }

/* ============ Fact bar (destination / itinerary key numbers) ============ */

.meta-bar-section {
  background: var(--bg-page);
  border-bottom: 1px solid var(--line);
}
.fact-bar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  gap: 1.5rem;
}
.fact-bar li {
  display: flex; flex-direction: column; gap: 0.4rem;
  align-items: center; text-align: center;
  position: relative;
  /* The same inset on every item, so each column's content is centred in its
     own cell and the rule between them sits on the cell edge. */
  padding-inline: clamp(0.5rem, 1.5vw, 1.25rem);
}
.fact-bar li + li::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
/* Label and value carry the same size. What separates them is the family,
   the weight and the colour, not the scale. */
.fact-bar span {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.45rem;
  font: 500 clamp(0.85rem, 1.05vw, 1rem)/1.2 var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
}
/* Drawn, one stroke weight, and never carrying meaning on their own: the
   label says what the number is, the mark only makes the row scannable. */
.fact-bar svg { flex: none; color: var(--brand-600); }
.fact-bar strong {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  font-weight: 430; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============ Article layout (destination / blog body + aside) ============ */

.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 26%, 340px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.article-body h2 { margin-bottom: 1.25rem; }
.article-body h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  margin-top: 2.5rem; margin-bottom: 0.85rem;
}
/* :not(.eyebrow) — this rule is more specific than .eyebrow, so without the
   exclusion the eyebrow inside an article rendered at 16px instead of 0.68rem,
   and the label read as a paragraph. Same guard as .duo-body above. */
.article-body p:not(.eyebrow) {
  font-size: 1rem; line-height: 1.85; color: var(--ink-body);
  max-width: 66ch; margin-bottom: 1.15rem;
}
.lead-para {
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  line-height: 1.75;
  color: var(--ink);
}
.article-aside {
  display: grid; gap: 1rem;
  position: sticky; top: calc(var(--header-h) + 1.5rem);
}
.aside-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2vw, 1.85rem);
}
.aside-card h3 {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.1rem;
}
.aside-list { margin: 0; display: grid; gap: 0.85rem; }
.aside-list dt {
  font: 600 0.85rem/1.4 var(--font-body);
  color: var(--ink);
}
.aside-list dd {
  margin: 0.15rem 0 0;
  font-size: 0.88rem; line-height: 1.6; color: var(--ink-body);
}
/* Widget area — Appearance > Widgets, "Right sidebar". The wrapper carries
   .aside-card, so only the inner list and spacing need handling here. */
.article-aside .widget ul { list-style: none; margin: 0; padding: 0; }
.article-aside .widget li { line-height: 2; }
.article-aside .widget li + li { border-top: 1px solid var(--line); }
.article-aside .widget a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .article-aside .widget a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.article-aside .widget img { max-width: 100%; height: auto; }

.aside-card-cta {
  background: var(--ground-dark);
  color: var(--on-dark);
}
.aside-card-cta h3 {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 430;
  letter-spacing: -0.02em; text-transform: none;
  color: var(--on-dark);
  margin-bottom: 0.6rem;
}
.aside-card-cta p {
  font-size: 0.9rem; line-height: 1.65;
  color: var(--on-dark-body);
  margin-bottom: 1.25rem;
}
.aside-card-cta .btn-primary { background: oklch(1 0 0); color: var(--brand-900); }
@media (hover: hover) and (pointer: fine) {
  .aside-card-cta .btn-primary:hover { background: var(--btn-light-hover); color: var(--brand-900); }
}

/* ============ Spec grid (what you can personalise) ============ */

.spec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
}
.spec-item { border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.spec-item h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  margin-bottom: 0.6rem;
}
.spec-item p {
  font-size: 0.95rem; line-height: 1.75; color: var(--ink-body);
  max-width: 38ch;
}

/* ============ Insight — the company speaking in its own voice ============
   Used on destination, experience and itinerary pages so the product is
   framed by our judgement rather than presented as a catalogue entry.
   Deliberately not a card: a rule, a label, and set type. */

.insight {
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-block: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: clamp(150px, 20%, 220px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
}
.insight-label {
  font: 600 0.66rem/1.5 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-600);
}
.insight-body > p {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.15rem, 1.75vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 54ch;
  margin-bottom: 1rem;
}
.insight-body > p + p {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--ink-body);
  letter-spacing: 0;
}
.insight-sig {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 1.5rem;
  font: 500 0.72rem/1.4 var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.insight-sig::before {
  content: ""; width: 1.75rem; height: 1px;
  background: var(--brand-600); flex: 0 0 auto;
}
/* On dark grounds */
.how .insight, .duo-dark .insight { border-top-color: var(--brand-200); }
.how .insight-label, .duo-dark .insight-label { color: var(--brand-200); }
.how .insight-body > p, .duo-dark .insight-body > p { color: var(--on-dark); }
.how .insight-body > p + p, .duo-dark .insight-body > p + p { color: var(--on-dark-body); }

/* Awaiting the client's own words */
.insight-pending .insight-body > p {
  color: var(--ink-muted);
  font-style: italic;
}
.insight-pending .insight-label { color: var(--ink-muted); }

/* ============ Team ============
   Names, roles and bios are placeholders until the client supplies them.
   Placeholder state is styled to read as unfinished on purpose, so it can
   never be mistaken for real content in review. */

.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.team-grid-3 { grid-template-columns: repeat(3, 1fr); }
.team-card { margin: 0; }
.team-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 1.25rem;
}
.team-photo img {
  width: 100%; height: clamp(240px, 24vw, 320px);
  object-fit: cover;
  transition: transform 1400ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-photo img { transform: scale(1.04); }
}
/* Awaiting a real portrait: desaturate and label it */
.team-photo[data-placeholder] img { filter: grayscale(1) contrast(0.85); opacity: 0.4; }
.placeholder-tag {
  position: absolute; inset: auto 0 0 0;
  padding: 0.55rem 0.85rem;
  font: 600 0.6rem/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-secondary);
  background: oklch(1 0 0 / 0.86);
  text-align: center;
}
.team-name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 430; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.team-role {
  font: 600 0.66rem/1.4 var(--font-body);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 0.65rem;
}
.team-bio {
  font-size: 0.9rem; line-height: 1.65;
  color: var(--ink-body);
}
/* Bracketed copy is placeholder copy — make that unmistakable */
.team-name, .team-role, .team-bio { color: var(--ink-muted); }
.team-name { font-weight: 600; }

/* ============ Contact ============ */

.contact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.contact-card {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink);
  transition: background-color 400ms var(--ease-out-expo),
              transform 500ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  a.contact-card:hover { background: var(--brand-050); transform: translateY(-3px); }
  a.contact-card:hover .contact-icon { color: var(--brand-600); }
}
.contact-card-static { cursor: default; }
.contact-icon {
  display: inline-flex; margin-bottom: 1.5rem;
  color: var(--brand-900);
  transition: color 400ms var(--ease-out-expo);
}
.contact-card h2 {
  font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}
.contact-value {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 430; line-height: 1.35;
  color: var(--ink);
  margin-bottom: 0.6rem;
  word-break: break-word;
}
.contact-note {
  font-size: 0.85rem; line-height: 1.6;
  color: var(--ink-muted);
  margin-top: auto;
}

/* ============ Form extras ============ */

.form-fieldset { border: none; margin: 0; padding: 0; }
.form-fieldset legend {
  font: 600 0.8rem/1.2 var(--font-body);
  color: var(--ink);
  padding: 0; margin-bottom: 0.7rem;
}
.form-fieldset legend span {
  font-weight: 400; color: var(--ink-muted);
  text-transform: none; letter-spacing: 0;
}
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; cursor: pointer; }
.chip input {
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: 0;
}
.chip span {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  font: 500 0.82rem/1 var(--font-body);
  color: var(--ink-body);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: all 300ms var(--ease-out-expo);
}
.chip input:checked + span {
  background: var(--brand-900);
  border-color: var(--brand-900);
  color: var(--on-dark);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover span { border-color: var(--brand-600); color: var(--brand-600); }
  .chip input:checked + span { color: var(--on-dark); }
  .chip:hover input:checked + span { background: var(--brand-700); border-color: var(--brand-700); }
}
.form-note {
  font-size: 0.78rem; color: var(--ink-muted);
  text-align: center; margin-top: -0.25rem;
}

/* ============ Páginas interiores ============ */

.page-hero {
  position: relative;
  height: min(46svh, 420px);
  min-height: 300px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.page-hero-short { height: min(38svh, 340px); min-height: 260px; }

.page-hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero-content {
  position: relative; width: 100%;
  padding-bottom: 2rem;
  color: var(--on-dark);
  text-align: center;
}
.page-hero .hero-sub { margin-inline: auto; }
.crumb {
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(1 0 0 / 0.8);
  text-decoration: none;
  display: inline-block; margin-bottom: 1.2rem;
  position: relative;
  z-index: 2;
}
/* Was clamping smaller than a body h2 (ratio 0.82), inverting the hierarchy. */
.page-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 400; color: oklch(1 0 0);
}
.page-hero .hero-sub { margin-bottom: 0; margin-top: 0.5rem; }

.page-intro {
  font-size: 1.05rem; color: var(--ink-body);
  line-height: 1.75; max-width: 46rem;
}
.wrap > .page-intro {
  margin-inline: auto;
  text-align: center;
}

.meta-bar {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.meta-bar > div {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.8rem; color: var(--ink-muted);
}
.meta-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand-700);
  flex-shrink: 0;
}
.meta-bar strong {
  display: block;
  font: 600 0.95rem/1.4 var(--font-body);
  color: var(--ink);
}

.days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.day {
  display: grid; grid-template-columns: 3.4rem 1fr;
  gap: 1.25rem;
  padding: 1.6rem 0;
  border-top: none;
  transition: background-color var(--t-med) var(--ease-out-expo);
  border-radius: var(--radius-btn);
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
}
.day:nth-child(n+3) {
  border-top: 1px solid var(--line);
}
@media (hover: hover) and (pointer: fine) {
  .day:hover { background: oklch(0.97 0.004 250); }
}
.day-num {
  font-family: var(--font-display);
  font-size: 0.95rem; color: var(--brand-600);
}
.day h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.day p { font-size: 0.93rem; color: var(--ink-body); line-height: 1.7; max-width: 56ch; }

.levels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
}
.level-card {
  background: oklch(1 0 0);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease-out-expo),
              box-shadow var(--t-slow) var(--ease-out-expo);
}
.level-card.is-featured {
  border-color: var(--brand-600);
  box-shadow: 0 10px 32px oklch(0.2 0.06 250 / 0.14);
}
.level-card.is-featured::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-600);
}
@media (hover: hover) and (pointer: fine) {
  .level-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px oklch(0.2 0.06 250 / 0.14);
  }
}
.level-tag {
  font: 600 0.7rem/1 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-600);
  display: block; margin-bottom: 0.5rem;
}
.level-card h3 { margin-bottom: 0.7rem; }
.level-card ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.45rem;
}
.level-card li {
  position: relative; padding-left: 1.4rem;
  font-size: 0.88rem; color: var(--ink-body);
}
.level-card li::before {
  content: "\2713"; position: absolute; left: 0;
  font-weight: 700; color: var(--brand-600);
}

.cols-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(8rem, 20vw, 12rem);
  align-items: start;
  text-align: left;
  max-width: 1000px;
  margin-inline: auto;
  padding: 2rem;
}
.check-list, .cross-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.5rem;
}
.check-list li, .cross-list li {
  position: relative; padding-left: 1.6rem;
  font-size: 0.95rem; line-height: 1.6;
  /* Was a hard-coded #ffffff. This list was built for the dark "What's
     included" band, so reusing it on a light section rendered white on white —
     invisible, and valid markup, so nothing flagged it. It inherits now, and
     the dark contexts set their own colour below. */
  color: var(--ink-body);
}
.check-list li strong { color: var(--ink); font-weight: 600; }
.check-list li + li, .cross-list li + li { margin-top: 0.55rem; }

.section-dark .check-list li, .section-dark .cross-list li,
.how .check-list li, .duo-dark .check-list li { color: var(--on-dark-body); }
.section-dark .check-list li strong { color: var(--on-dark); }

.check-list li::before {
  content: "\2713"; position: absolute; left: 0;
  /* #22c55e and #ef4444 came from no palette at all. These are the tick and
     cross colours the client's own site uses. */
  font-weight: 700; color: #5c9118;
}
.cross-list li::before {
  content: "\00d7"; position: absolute; left: 0;
  font-weight: 700; color: #e86b4d;
}

.prose {
  max-width: 55rem;
  margin-inline: auto;
  text-align: left;
  padding-inline: var(--pad-x);
}
.prose p { font-size: 0.98rem; color: var(--ink-body); line-height: 1.8; margin-bottom: 1.1rem; max-width: none; text-wrap: pretty; }
.prose h2 { font-size: 1.45rem; margin-top: 2.25rem; margin-bottom: 0.8rem; }
.prose ul {
  margin: 0 auto 1.1rem; padding-left: 1.2rem;
  color: var(--ink-body);
  display: inline-block; text-align: left;
  max-width: 36rem;
}
.prose li { margin-bottom: 0.4rem; font-size: 0.98rem; line-height: 1.7; }

/* ============ Precio destacado ============ */

.price-banner {
  margin-top: 2.25rem;
  border: 1px solid oklch(0.6 0.1 25 / 0.15);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, oklch(0.97 0.01 250), oklch(0.955 0.008 250));
  padding: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  display: grid; gap: 0.6rem; justify-items: center;
  box-shadow:
    0 2px 8px oklch(0.2 0.04 250 / 0.06),
    0 12px 32px oklch(0.2 0.06 250 / 0.08);
}
.price-label {
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.price-main { display: flex; align-items: baseline; gap: 0.6rem; }
.price-amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 430; line-height: 1;
  color: var(--ink);
}
.price-per { font-size: 0.9rem; color: var(--ink-muted); }
.price-conditions {
  font-size: 0.85rem; color: var(--ink-muted);
  max-width: 34rem;
}
.price-banner .btn { margin-top: 0.5rem; }

/* ============ Section heading accent ============
   The multicolour dashed rule was removed at the client's request
   ("este diseño de líneas no siento que sume a la página").

/* ============ Trending — Lo que se vende ============ */

/* Editorial "what's selling" board: one feature + two stacked.
   Deliberately a different visual language from `.itin` — text sits
   *on* the photograph here, rather than beside it. */
/* Light ground so this doesn't merge with the dark CTA band above and the
   dark process band below — the photo cards carry the contrast themselves. */
.trending-section {
  padding-block: var(--section-y);
  color: var(--ink);
}
.trending-head {
  text-align: center;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.trending-head .eyebrow {
  justify-content: center;
  color: var(--accent);
}
.trending-head h2 { color: var(--ink); margin-bottom: 0; }
.trending-head h2 em { color: var(--brand-600); }

.trending-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(0.6rem, 1.1vw, 1rem);
  margin-top: 0;
}
.trending-stack {
  display: grid; grid-template-rows: 1fr 1fr;
  gap: clamp(0.6rem, 1.1vw, 1rem);
}

.trending-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--stone);
  border: none;
  text-decoration: none;
  color: var(--on-dark);
  min-height: 220px;
  transition: none;
}
.trending-card-feature { min-height: clamp(420px, 46vw, 560px); }

.trending-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1400ms var(--ease-out-expo),
              opacity 700ms var(--ease-out-expo);
}
.trending-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
    oklch(0.13 0.012 259 / 0.92) 0%,
    oklch(0.13 0.012 259 / 0.45) 48%,
    oklch(0.13 0.012 259 / 0.05) 100%);
}
@media (hover: hover) and (pointer: fine) {
  .trending-card:hover img { transform: scale(1.06); opacity: 0.9; }
}

.trending-badge {
  display: inline-block;
  align-self: flex-start;
  font: 600 0.62rem/1 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--accent-amber);
  color: var(--brand-900);
  padding: 0;
  margin-bottom: 0.85rem;
  border-radius: 0;
  position: static;
}
.trending-content {
  position: absolute; inset: auto 0 0 0;
  z-index: 1;
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2.2vw, 2.25rem);
}
.trending-content h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 430;
  letter-spacing: -0.022em;
  margin-bottom: 0.55rem;
  color: var(--on-dark);
}
.trending-card-feature .trending-content h3 {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  margin-bottom: 0.85rem;
}
.trending-meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem;
  font: 500 0.72rem/1 var(--font-body);
  color: oklch(1 0 0 / 0.72);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 0;
  margin-top: 0.55rem;
  padding-top: 0.9rem;
  border-top: 1px solid oklch(1 0 0 / 0.2);
  font-variant-numeric: tabular-nums;
}
.trending-desc {
  font-size: 0.98rem; color: oklch(1 0 0 / 0.8);
  line-height: 1.7; flex-grow: 0;
  max-width: 42ch;
}
/* Secondary cards drop the description entirely — the feature carries the story */
.trending-stack .trending-desc { display: none; }

/* Value grid — now tailor-made.html's, not the home page's. The home page's
   value block was rebuilt as .value-spread; these rules stay because that
   page still renders a two-column grid of rule-topped cards. */
.value-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 6vw, 5rem);
  max-width: 980px; margin-inline: auto;
}
.value-card {
  padding: 1.75rem 0 0;
  text-align: left;
  border-top: 1px solid var(--ink);
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 430;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  color: var(--ink);
}
.value-card p {
  font-size: 0.98rem;
  color: var(--ink-body);
  line-height: 1.78;
  max-width: 42ch;
}

/* ============ Propuesta de Valor ============
   The four values sit as one column beside the heading and its copy, each with
   its icon to the left of the title and caption.

   Flex with a .value-text wrapper, not grid placement: the icon, the title and
   the caption were siblings, so every attempt to lay them out directly left
   each band sized to its own content and centred, and the four bands started
   at four different x positions. Wrapping the copy makes each band exactly two
   children, so the icons share one left edge by construction.

   Icons are drawn at the site's own weight (24 viewBox, 1.5 stroke) so they
   sit with the arrows and check marks already on the page. */

.value-section {
  padding-block: var(--section-y-lg);
  background: var(--bg-page);
}
.value-spread {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.value-head .eyebrow { justify-content: flex-start; }
/* Left column: everything shares one left edge. The eyebrow still carried
   margin-inline:auto from the centred version, which inset it 15px past the
   heading, and the microcopy still carried a centre. */
.value-head .eyebrow,
.value-head .value-intro { margin-inline: 0; }
.value-head .value-micro { text-align: left; }
.value-section h2 { margin-bottom: 1.15rem; max-width: 16ch; }
.value-intro {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--ink-body);
  line-height: 1.75;
  max-width: 46ch;
  margin: 0 0 clamp(1.75rem, 3vw, 2.4rem);
}
.value-head .value-micro { margin: 1rem 0 0; max-width: none; }

.value-items {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(1.6rem, 2.6vw, 2.1rem);
}
.value-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 1.8vw, 1.35rem);
}
.value-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--brand-050);
  /* --accent-orange lands at 2.45:1 on this disc and the strokes go washed
     out; the terracotta is 4.65:1 and is already the eyebrow's colour here. */
  color: var(--accent);
}
.value-icon svg { width: 22px; height: 22px; }
.value-text { min-width: 0; }
.value-item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin-bottom: 0.3rem;
  color: var(--ink);
}
.value-item p {
  font-size: 0.94rem;
  color: var(--ink-body);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 900px) {
  .value-spread { grid-template-columns: 1fr; gap: clamp(2.25rem, 5vw, 3rem); }
  .value-section h2 { max-width: 20ch; }
  .value-intro { max-width: 58ch; }
  .value-items { max-width: 40rem; }
}

/* ============ Reveal on scroll ============ */

/* Hidden until main.js scrolls it into view — but only where main.js is going
   to run. The .js class is set by an inline script in the head, so a browser
   with scripting off, or a page where main.js threw before it got here, shows
   the content rather than a blank column. Content that only exists if a script
   succeeds is content that can vanish. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1100ms var(--ease-out-expo) var(--d, 0s),
              transform 1100ms var(--ease-out-expo) var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* The block editor is the same case: it loads this stylesheet but not main.js,
   so every .reveal sat at zero opacity and the previews came back blank. */
.editor-styles-wrapper .reveal {
  opacity: 1;
  transform: none;
}

/* ============ Experience Cards (New) ============ */

.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.experience-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t-med) var(--ease-out-expo);
}

.experience-card:hover {
  border-color: var(--blue-brand);
  box-shadow: 0 8px 32px oklch(0.2 0.04 250 / 0.12);
  transform: translateY(-2px);
}

.exp-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.exp-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-med) var(--ease-out-expo);
}

.experience-card:hover .exp-image img {
  transform: scale(1.05);
}

.exp-content {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  flex-grow: 1;
}

.exp-content h3 {
  font: 500 1.35rem/1.15 var(--font-display);
  color: var(--ink);
  margin-bottom: 0.35rem;
}


.exp-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-body);
  margin-bottom: 1.25rem;
}

.exp-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}

.exp-highlights li {
  font-size: 0.9rem;
  color: var(--ink-secondary);
  padding: 0.35rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.exp-highlights li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--blue-brand);
  font-weight: 600;
}

.experience-card .link-arrow {
  margin-top: auto;
}

/* ============ Itinerary Grid (New) ============ */

.itinerary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.itinerary-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t-med) var(--ease-out-expo);
}

.itinerary-card:hover {
  border-color: var(--blue-brand);
  box-shadow: 0 12px 40px oklch(0.2 0.04 250 / 0.15);
  transform: translateY(-4px);
}

.itin-card-image {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.itin-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-med) var(--ease-out-expo);
}

.itinerary-card:hover .itin-card-image img {
  transform: scale(1.06);
}

.itin-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font: 600 0.75rem/1 var(--font-body);
  background: var(--accent-amber);
  color: var(--brand-900);
  padding: 0.45rem 0.85rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 2;
}

.itin-badge-featured {
  background: var(--blue-brand);
  color: var(--on-dark);
}

.itin-card-content {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  flex-grow: 1;
}

.itin-card-content h3 {
  font: 500 1.35rem/1.15 var(--font-display);
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.itin-meta-text {
  font: 600 0.85rem/1 var(--font-body);
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.itin-card-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-body);
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.itin-card-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.itin-card-highlights li {
  font-size: 0.9rem;
  color: var(--ink-secondary);
  padding: 0.4rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.itin-card-highlights li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blue-brand);
  font-weight: 600;
}

.itin-card-content .link-arrow {
  margin-top: auto;
}

.page-intro {
  max-width: 70ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-body);
  margin-bottom: 1rem;
}

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition-duration: 1ms; }
  .bento-card img, .itin-media img, .guide-card img, .duo-media img { transition: none; }
  .drawer { transition-duration: 1ms; }
  .hero-slide { transition-duration: 1ms; }
  .hero-slide.is-active img { animation: none; }
  .certs-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .hero-content h1, .page-hero h1, .hero-sub, .hero-actions,
  .hero-content .eyebrow, .page-hero .crumb { animation: none; }
  /* cueDrop ends at opacity 0 — without this the cue would vanish entirely */
  .guide-card { animation: none; }
  .hero-pause { display: none; }
  .wa-float { animation: none !important; }
  .form-success { animation: none; }
  .day:hover { transition: none; }
  .level-card { transition: none; }
}

/* ============ Responsive ============ */

@media (max-width: 1040px) {
  .section-head { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .section-head-lead { padding-bottom: 0; }
}

@media (max-width: 900px) {
  /* Tablet */
  .main-nav { display: none; }
  .nav-toggle { display: flex; margin-left: 0; }
  .header-actions { gap: 0.5rem; margin-left: auto; }
  .header-actions .btn { display: none; }

  /* All three stay visible on tablet; hiding a card to avoid an orphan
     costs the reader content, which is the worse trade. */
  .guides { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }

  /* Mosaic collapses to feature-over-pair-over-wide.
     grid-auto-rows sizes the implicit third row the wide card lands in. */
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: clamp(230px, 34vw, 300px) clamp(170px, 26vw, 220px);
    grid-auto-rows: clamp(170px, 26vw, 220px);
  }
  .bento-feature { grid-column: 1 / span 2; grid-row: 1; }
  .bento-wide { grid-column: 1 / span 2; grid-row: auto; }

  .experience-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .itinerary-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  /* Feature-over-pair keeps the editorial hierarchy instead of 3 equal cards */
  .trending-grid { grid-template-columns: 1fr; }
  .trending-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .trending-card-feature { min-height: clamp(340px, 52vw, 440px); }

  .value-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .testimonial-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 40rem; margin-inline: auto; }
  .footer-main { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }

  .duo-media img { height: clamp(300px, 42vw, 420px); aspect-ratio: 4 / 3; }
  .how-steps { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .dest-feature { grid-template-columns: 1fr; gap: 1.75rem; }
  .dest-feature-media img { height: clamp(280px, 44vw, 400px); }
  .dest-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(210px, 30vw, 260px); }
  .dest-card-tall { grid-column: 1 / span 2; grid-row: auto; }
  .dest-card-wide { grid-column: 1 / span 2; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .insight { grid-template-columns: clamp(130px, 24%, 180px) minmax(0, 1fr); gap: 1.5rem; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .fact-bar { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .fact-bar li:nth-child(odd)::before { display: none; }
  /* No padding override here: the inset is symmetric now, and killing it
     on one side pulled those two columns 4-7px off their own centre. */
  .how-steps-4 { grid-template-columns: 1fr 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; grid-template-columns: 1fr 1fr; display: grid; }
  .how-steps::before { display: none; }
  .final-cta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { padding-bottom: 48px; }

  /* Hero stays full-bleed and tall on mobile — it is the first impression */
  .hero { height: 100svh; min-height: 540px; }
  .hero-content { padding-bottom: 6.5rem; }
  .hero-content h1 { max-width: 100%; }
  .hero-sub { margin-bottom: 2rem; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-caption { display: none; }
  .hero-pause { bottom: 1.5rem; }
  .hero-dots { bottom: 1.75rem; left: var(--pad-x); right: auto; }
  .hero-dots button { width: 26px; margin-left: 0; margin-right: 10px; }

  /* Trust: 2x2 so the figures stay large enough to read as claims */
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 1rem; }
  .trust-item + .trust-item::before { display: none; }
  .trust-item:nth-child(even)::before {
    content: ""; display: block;
    position: absolute; left: -0.5rem; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 2.6rem; background: var(--line);
  }

  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0.6rem;
  }
  .bento-card { min-height: 210px; }
  .bento-feature { grid-column: 1; grid-row: auto; min-height: 300px; }
  .bento-wide { grid-column: 1; grid-row: auto; }

  .itin, .itin-reverse { grid-template-columns: 1fr; gap: 1.5rem; }
  .itin-reverse .itin-media { order: 0; }
  .itin-reverse .itin-body { order: 1; }
  .itin { margin-bottom: 3rem; }
  .itin-media img { height: clamp(250px, 62vw, 340px); }

  .how-steps { grid-template-columns: 1fr; gap: 2.25rem; }
  .how-steps::before { display: none; }
  /* The marker row owns this spacing now; putting it back on the numeral
     would drop it below the icon it is meant to sit beside. */
  .how-marker { margin-bottom: 0.9rem; }

  .duo-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .duo-dark .duo-media { order: 2; }
  .duo-media img { height: clamp(260px, 62vw, 340px); aspect-ratio: 4 / 3; }
  .stats-row { gap: 1.25rem; flex-wrap: wrap; }

  .certs-track img { height: 34px; }

  .guides { grid-template-columns: 1fr; gap: 2.25rem; }
  .guides-more { text-align: left; }
  .guide-categories { gap: 1.25rem; overflow-x: auto; flex-wrap: nowrap; }
  .guide-filter { white-space: nowrap; }

  .experience-grid { grid-template-columns: 1fr; }
  .itinerary-grid { grid-template-columns: 1fr; }

  .trending-grid { grid-template-columns: 1fr; }
  .trending-stack { grid-template-columns: 1fr; }
  .trending-card-feature { min-height: 380px; }

  .testimonial-lead blockquote { margin: 1.25rem 0 1.5rem; }

  .dest-feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .dest-feature-media img { height: clamp(240px, 60vw, 320px); }
  .dest-facts { gap: 1.25rem 1.75rem; }
  .dest-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(230px, 56vw, 280px); }
  .dest-card-tall, .dest-card-wide { grid-column: 1; grid-row: auto; }
    /* Two columns leaves the body column too narrow to set type in */
  .insight { grid-template-columns: 1fr; gap: 0.9rem; }
  .insight-label { margin-bottom: 0; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .team-photo img { height: clamp(180px, 44vw, 240px); }
  .contact-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .fact-bar { grid-template-columns: 1fr 1fr; }
  .how-steps-4 { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; gap: 2rem; }
  .article-aside { grid-template-columns: 1fr; position: static; }
  .page-hero-short { height: min(46svh, 300px); }
  .chip span { font-size: 0.78rem; padding: 0.5rem 0.8rem; }

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

  .day { grid-template-columns: 1fr; gap: 0.3rem; }
  .levels { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  .meta-bar { gap: 1.25rem; }

  .footer-main { grid-template-columns: 1fr; }

  .mobile-bar { display: grid; }

  /* Botones más grandes en móvil */
  .btn {
    min-height: 50px;
    min-width: 48px;
    padding: clamp(0.85rem, 2vw, 1rem) clamp(1.1rem, 3vw, 1.5rem);
  }
  .wa-float { display: none; }
}

/* Days grid layout */




/* Inclusions grid layout */



.check-list,
.cross-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.check-list li::before {
  content: "✓ ";
  margin-right: 0.5rem;
}

.cross-list li::before {
  content: "✗ ";
  margin-right: 0.5rem;
}

/* ============ ACCESIBILIDAD: Respetar prefers-reduced-motion ============ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/* ============ Accessibility pass ============ */

/* Disclosure button beside each nav link. Hover alone left the menu
   unreachable on touch, and its links tabbable while invisible. */
/* A closed menu must be out of the tab order, not merely invisible */
/* No :focus-within here — it kept the menu visible after Escape, because the
   disclosure button still holds focus. The button is the keyboard path. */

/* Touch targets: WCAG 2.5.5 asks for 44x44. Padding on the control itself
   is more reliable than an overlay, which the earlier pass only got to ~36px. */
.link-arrow  { padding-block: .85rem; min-height: 44px; align-items: center; }
.guide-filter{ padding-block: .95rem; min-height: 44px; }
.footer-col a{ padding-block: .55rem; min-height: 44px; }


.brand { display: inline-flex; align-items: center; min-height: 44px; }
.testimonials-sub, .certs-title { line-height: 1.4; }

/* Focus: three components relied on the global outline, which disappears
   over photography and over the brand blue. */
.guide-filter:focus-visible,
.nav-toggle:focus-visible,
.nav-disclosure:focus-visible,
.trending-card:focus-visible,
.dest-card:focus-visible,
.bento-card:focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: 3px;
  border-radius: 3px;
}
.trending-card:focus-visible,
.dest-card:focus-visible,
.bento-card:focus-visible {
  box-shadow: 0 0 0 3px oklch(1 0 0 / .9);
}

/* Form errors: a red border alone is invisible to anyone who cannot
   distinguish the colour, and silent to a screen reader. */
.field-error {
  margin-top: .4rem;
  font: 500 .8rem/1.5 var(--font-body);
  color: var(--form-error);
  display: flex; align-items: flex-start; gap: .35rem;
}
.field-error::before { content: "\26A0"; font-size: .9em; line-height: 1.4; }
.trip-form .is-invalid {
  border-color: var(--form-error);
  box-shadow: 0 0 0 3px oklch(0.55 0.19 27 / .14);
}
.trip-form button[aria-busy="true"] { opacity: .75; cursor: progress; }
.trip-form button:disabled { cursor: not-allowed; }
.form-success:focus { outline: 2px solid var(--brand-600); outline-offset: 3px; }

/* Mobile legibility: labels were rendering at 10.9px with 0.2em tracking. */
@media (max-width: 680px) {
  .eyebrow { font-size: .76rem; letter-spacing: .14em; }
  .hero-caption { font-size: .74rem; }
  .btn, .btn-label { font-size: .78rem; }
  .stat span, .trust-label, .dest-card-meta,
  .team-role, .guide-tag, .trending-badge, .insight-label,
  .testimonials-sub, .certs-title,   .link-arrow, .guide-filter { font-size: .78rem; }
  .form-note, .field-error { font-size: .8rem; }
  .bento-cue, .placeholder-tag, .itin-meta-clean,
  .hero-caption { font-size: .76rem; }
}


/* ============ 404 ============ */
.section-lost { padding-block: clamp(4rem, 12vh, 8rem) var(--section-y-lg); }
.section-lost h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1rem; }
.lost-lede { font-size: 1.05rem; line-height: 1.75; color: var(--ink-body); max-width: 46ch; }
.lost-links {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; max-width: 780px;
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  border-top: 1px solid var(--line);
}
.lost-link {
  display: grid; gap: .3rem;
  padding: 1.4rem 1.5rem 1.4rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left 400ms var(--ease-out-expo), background-color 300ms var(--ease-out-expo);
}
.lost-link:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 2rem; }
.lost-link:nth-child(even) { padding-left: 2rem; }
.lost-link-label {
  font-family: var(--font-display); font-weight: 430;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.02em; color: var(--ink);
}
.lost-link-label::after { content: " \2192"; color: var(--brand-600); }
.lost-link-note { font-size: .92rem; line-height: 1.6; color: var(--ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .lost-link:hover { padding-left: 1rem; }
  .lost-link:nth-child(even):hover { padding-left: 3rem; }
  .lost-link:hover .lost-link-label { color: var(--brand-600); }
}
.lost-help { margin-top: 2.5rem; font-size: .95rem; color: var(--ink-body); }
.lost-help a { color: var(--brand-600); }
@media (max-width: 680px) {
  .lost-links { grid-template-columns: 1fr; }
  .lost-link:nth-child(odd) { border-right: none; padding-right: 0; }
  .lost-link:nth-child(even) { padding-left: 0; }
  .lost-link:nth-child(even):hover { padding-left: 1rem; }
}


/* ============ Spacing utilities ============
   Replace the ad-hoc inline padding/margin that had accumulated on inner
   pages and made their vertical rhythm diverge from the system. */
.u-pt-0   { padding-top: 0; }
.u-pt-sm  { padding-top: clamp(1.25rem, 2vw, 1.75rem); }
.u-pb-0   { padding-bottom: 0; }
.u-mt-lg  { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.u-mb-md  { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.section-dark { background: var(--bg-dark); }
.section-dark h2, .section-dark h3 { color: var(--on-dark); }

/* Legacy card markup on inner pages carried its whole appearance inline. */
.legacy-card {
  text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-page); border: 1px solid var(--line);
  height: 100%;
  transition: border-color var(--t-med) var(--ease-out-expo),
              transform var(--t-med) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .legacy-card:hover { border-color: var(--brand-600); transform: translateY(-3px); }
}
.legacy-card > img { width: 100%; height: 240px; object-fit: cover; }
.legacy-card h3 { padding: 1.5rem 1.5rem .75rem; font-size: 1.1rem; margin: 0; }
.legacy-card p  { padding: 0 1.5rem 1.5rem; font-size: .95rem; line-height: 1.6; color: var(--ink-body); margin: 0; }
.lead-body { font-size: 1.02rem; line-height: 1.8; color: var(--ink-body); margin: 0 0 1rem; max-width: 70ch; }

.u-center { text-align: center; max-width: 800px; margin-inline: auto; }
/* The eyebrow is a flex row, so text-align on the parent does nothing to it. */
.u-center > .eyebrow { justify-content: center; }
.u-center-mb { text-align: center; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.media-tile { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-lg); }
.media-tile-lg { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 1rem; }

/* Remaining one-off inline layout, collected into the system */
.u-narrow      { max-width: 900px; }
.u-mt-xl       { margin-top: clamp(2rem, 4vw, 3rem); }
.u-mt-xl-c     { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.u-mt-mb       { margin-top: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.u-mb-c        { margin-bottom: clamp(1.5rem, 3vw, 2rem); text-align: center; }
.u-mb-xs       { margin-bottom: .5rem; }
.u-center-x    { justify-content: center; }
.u-h2-alt      { font-size: clamp(1.75rem, 3.2vw, 2.6rem); margin-bottom: 1.5rem; }
.u-lede        { font-size: 1.08rem; line-height: 1.8; margin-bottom: 1rem; }
.u-lede-2      { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.5rem; color: var(--ink-body); }
.u-body-wide   { font-size: 1.02rem; line-height: 1.8; color: var(--ink-body); margin: 0; max-width: 70ch; }
.u-body-muted  { font-size: .98rem; line-height: 1.8; color: var(--ink-muted); margin-bottom: 2rem; }
.u-grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.u-grid-2      { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.u-row-center  { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.u-row-center-sp { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: clamp(2.5rem, 6vw, 5rem); margin-bottom: 2rem; }
.u-body-65     { color: var(--ink-body); margin-bottom: 3rem; max-width: 65ch; }
.u-body-900    { color: var(--ink-body); font-size: 1rem; line-height: 1.8; max-width: 900px; }
.u-accent-b    { color: var(--brand-600); font-weight: 600; }
.section-band  { background: var(--bg-page); padding-block: var(--section-y); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .u-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .u-grid-3, .u-grid-2 { grid-template-columns: 1fr; } }


/* ============ Testimonials — single-quote carousel ============
   Follows the reference in the client's deck: one centred review at a time,
   arrows either side, rating, attribution, and a link out to the full set. */

.testimonials {
  position: relative; isolation: isolate;
  padding-block: var(--section-y-lg);
  background: var(--surface);
  text-align: center;
}
/* p15 · a photo behind the band. The wash over it used to run 88-93%, which
   left the picture invisible; it is gone, and the card carries its own ground
   instead of relying on the section being flattened first. */
.testimonials-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: -1;
}
.testimonials .tq { box-shadow: var(--shadow-md); }
/* Opaque by default so the quote is legible wherever backdrop-filter is not
   available. Where it is, the card drops to 82% and blurs what is behind it —
   the blur is what keeps the text stable over a photo that is bright in one
   corner and dark in another, rather than decoration. At 82% over the darkest
   pixel the quote still reads 6.03:1. */
.testimonials .tq { background: oklch(1 0 0 / 0.94); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .testimonials .tq {
    background: oklch(1 0 0 / 0.78);
    /* 14px smoothed the photo into a flat wash. Less blur keeps its texture
       readable through the card while still steadying the copy over it. */
    -webkit-backdrop-filter: blur(7px) saturate(1.08);
    backdrop-filter: blur(7px) saturate(1.08);
  }
}
/* --ink-muted is 4.28:1 on white before the card even turns translucent, and
   2.81:1 once it does. This line moves up to the body ink. */
.testimonials .tq-note { color: var(--ink-body); }
.tq {
  max-width: 760px; margin-inline: auto;
  display: grid; justify-items: center;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem);
  background: var(--bg-page);
  border-radius: var(--radius-lg);
}
.tq-mark { color: var(--brand-600); opacity: .55; margin-bottom: 1.25rem; }
.tq-title {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.tq-title em { color: var(--brand-600); }

.tq-viewport {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(.5rem, 2vw, 1.75rem);
  width: 100%;
}
.tq-slides { display: grid; }
/* Every slide occupies the same cell so the block does not jump in height */
.tq-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--ease-out-expo);
  display: grid; justify-items: center; gap: 1.1rem;
}
.tq-slide.is-current { opacity: 1; visibility: visible; }
.tq-slide blockquote { margin: 0; }
.tq-slide blockquote p {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink);
  margin: 0; max-width: 52ch;
}
.tq-slide blockquote p::before { content: "\201C"; }
.tq-slide blockquote p::after  { content: "\201D"; }
.tq-rating { display: flex; gap: 5px; }
.tq-rating span {
  width: 12px; height: 12px;
  background: var(--accent-soft);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.tq-slide figcaption { display: grid; gap: .2rem; }
.tq-slide cite {
  font: 600 .88rem/1.3 var(--font-body);
  font-style: normal; color: var(--ink);
}
.tq-slide figcaption span {
  font: 500 .7rem/1.4 var(--font-body);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}

.tq-arrow {
  width: 46px; height: 46px; min-width: 44px; min-height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--ink-muted); cursor: pointer;
  transition: color 300ms var(--ease-out-expo), background-color 300ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .tq-arrow:hover { color: var(--brand-600); background: var(--surface); }
}
.tq-arrow:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.tq-dots { display: flex; gap: 8px; margin-top: 1.75rem; }
.tq-dot {
  width: 30px; height: 2px; border: 0;
  /* Same as the hero dots: 30x2 was unhittable, especially on a phone.
     content-box, or the global border-box clamps the padding to height:2px. */
  box-sizing: content-box;
  padding-block: 21px;
  background-clip: content-box;
  background-color: var(--line);
  cursor: pointer;
  position: relative;
  transition: background-color 350ms var(--ease-out-expo);
}
.tq-dot::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
.tq-dot.is-active { background-color: var(--brand-600); }
.tq-dot:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.tq-more { margin-top: .5rem; }
.tq-note {
  margin-top: 1rem;
  font: 500 .7rem/1 var(--font-body);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted);
}
.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;
}

@media (max-width: 680px) {
  .tq { padding-inline: 1.1rem; }
  .tq-viewport { gap: .25rem; }
  .tq-arrow { width: 44px; height: 44px; }
  .tq-slide blockquote p { font-size: .98rem; }
}

/* Optional hero video — only paints once the file has loaded, so the photo
   carousel underneath is what shows until then (and always, if the client
   supplies no footage). */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; z-index: 0;
  transition: opacity 900ms var(--ease-out-expo);
}
.hero.has-video .hero-video { opacity: 1; }
.hero.has-video .hero-slides,
.hero.has-video .hero-dots,
.hero.has-video .hero-caption { display: none; }


/* ============ Rhythm after the hero ============
   The first section under a page hero was inheriting 0px or 28px of top
   padding on different pages, which read as cramped. One rule, everywhere. */
.page-hero + section,
.page-hero + .meta-bar-section + section { padding-top: var(--section-y); }
.page-hero + .meta-bar-section { padding-top: 0; }
.page-hero + section.u-pt-0,
.page-hero + section.u-pt-sm { padding-top: var(--section-y); }

/* The anchor index now sits between the hero and the first section, so the
   adjacency rules above stopped matching on every rebuilt page. Repeat them
   through .pagenav rather than loosening them into a general sibling match,
   which would also hit sections much further down. */
.pagenav + section,
.pagenav + .meta-bar-section + section,
.pagenav + section.u-pt-0,
.pagenav + section.u-pt-sm { padding-top: var(--section-y); }
.pagenav + .meta-bar-section { padding-top: 0; }


/* ============ Seams between sections ============
   Two sections that share a ground stack their paddings into a 230–282px gap
   with no change of colour to explain it — it reads as a hole, not as a
   separation. Where the ground does change, the double padding is doing real
   work and is left alone. */
.section-sand  + .section-sand:not(.u-pt-0),
/* Collapsing the gap between two bands of the same colour, so consecutive
   sections do not stack two paddings.

   .testimonials is no longer in this list. It used to be a flat --surface
   band, indistinguishable from .section-sand, so butting them made sense.
   It carries a photograph now: it is its own band, and on four pages the
   rule was cropping its top padding to zero — the picture began abruptly
   and the quote card sat flush against the edge, while the home page (which
   follows a .duo, not a .section-sand) kept its 166px and looked right. */
.testimonials  + .testimonials,
.section-dark  + .section-dark:not(.u-pt-0) { padding-top: 0; }


/* ============ Measure ============
   Several prose utilities were running past 100 characters on a 1440px
   viewport. Cap them at a comfortable measure. */
.u-body-900, .u-body-wide, .lead-body, .u-lede, .u-lede-2, .u-body-65,
.prose p, .article-body p { max-width: 68ch; }
.u-center .u-body-900, .u-center .lead-body { margin-inline: auto; }

/* ============ Vertical rhythm ============
   Section padding had drifted to five different values on some pages.
   Utilities now step off the same scale as .section. */
.u-pt-0  { padding-top: 0; }
.u-pt-sm { padding-top: var(--section-y-sm); }
.section-band { padding-block: var(--section-y); }


/* ============ Primary nav ============
   Structure is wp_nav_menu() output: ul.menu > li.menu-item > a + ul.sub-menu.
   An item shows one of two things, never both: the sub-menu below, or a mega
   panel further down this file. inc/nav.php decides which and moves the
   children accordingly, so these rules never have to compete. */

.main-nav .menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2.25rem;
}
.main-nav .menu-item { position: relative; display: flex; align-items: center; }
.main-nav .menu > .menu-item > a {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 500 .78rem/1 var(--font-body);
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-body); text-decoration: none;
  padding: .85rem 0; white-space: nowrap; position: relative;
  transition: color 350ms var(--ease-out-expo);
}
.has-hero .site-header:not(.is-scrolled) .main-nav .menu > .menu-item > a { color: oklch(1 0 0 / .88); }
.main-nav .menu > .menu-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .45rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 450ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .main-nav .menu > .menu-item > a:hover { color: var(--brand-600); }
  .has-hero .site-header:not(.is-scrolled) .main-nav .menu > .menu-item > a:hover { color: oklch(1 0 0); }
  .main-nav .menu > .menu-item > a:hover::after { transform: scaleX(1); }
}
.main-nav .menu-item.is-active > a { color: var(--brand-600); }
.main-nav .menu-item.is-active > a::after { transform: scaleX(1); }
.has-hero .site-header:not(.is-scrolled) .main-nav .menu-item.is-active > a { color: oklch(1 0 0); }

/* Disclosure button, injected by JS so the PHP stays a plain wp_nav_menu call */
.sub-toggle {
  background: none; border: 0; padding: 0 .1rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 44px;
  color: inherit; cursor: pointer;
}
.sub-toggle svg { transition: transform 350ms var(--ease-out-expo); opacity: .7; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }
.has-hero .site-header:not(.is-scrolled) .sub-toggle { color: oklch(1 0 0 / .88); }

.main-nav .sub-menu {
  display: none;
  position: absolute; top: calc(100% + .55rem); left: -1rem;
  list-style: none; margin: 0; padding: .5rem 0;
  min-width: 244px;
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px oklch(0.2 0.02 259 / .16);
  z-index: 60;
}
.menu-item-has-children.is-open > .sub-menu,
.menu-item-has-children:hover > .sub-menu { display: block; }
.main-nav .sub-menu a {
  display: block; padding: .6rem 1.4rem;
  font: 400 .88rem/1.35 var(--font-body);
  letter-spacing: 0; text-transform: none;
  color: var(--ink-body); text-decoration: none;
  white-space: nowrap;
  transition: color 220ms var(--ease-out-expo), padding-left 300ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .main-nav .sub-menu a:hover { color: var(--brand-600); padding-left: 1.7rem; }
}
.sub-toggle:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }


/* ============ Mega menu ============
   Panels are rendered from data/nav.json (a WP_Query per CPT after migration).
   The column count comes from the data via --cards, so the row can never spill
   into an orphan second row the way the hand-built version did. */

.main-nav .menu-item[data-mega] > a { padding-right: .2rem; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg-page);
  border-top: 1px solid var(--line);
  box-shadow: 0 24px 48px oklch(0.2 0.02 259 / .14);
  z-index: 60;
  animation: megaIn 300ms var(--ease-out-expo) both;
  /* Two rows of tall cards run past the fold on a 768px-high laptop — 875px
     against 768 — and the bottom row was simply unreachable. Cap it to what
     is left below the header and let it scroll. */
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mega[hidden] { display: none; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mega-inner {
  display: grid; grid-template-columns: clamp(170px, 16%, 240px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 3.4vw, 3.25rem);
  align-items: start;
  /* Wider than .wrap's cap: the panel is the full bar, and at 1104px the cards
     came out 134px across, closer to a chip than to a picture. */
  max-width: min(1600px, 100% - 2 * var(--pad-x));
  margin-inline: auto;
}
.mega-side { display: grid; gap: .05rem; align-content: start; }
.mega-side-title {
  font: 600 .68rem/1 var(--font-body);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: .9rem;
}
/* The side entry that is driving the grid. */
.mega-side a.is-active { color: var(--brand-600); font-weight: 600; }
.mega-side a.is-active::before {
  content: ""; position: absolute; left: -0.7rem;
  width: 2px; height: 1.05em;
  background: var(--brand-600);
}
.mega-side a { position: relative; }
/* Groups stack in one cell so switching does not resize the panel. */
.mega-groups { display: grid; }
.mega-groups > .mega-cards { grid-area: 1 / 1; }
.mega-groups > .mega-cards[hidden] { display: none; }

.mega-side a {
  font: 500 .92rem/1.4 var(--font-body);
  color: var(--ink-body); text-decoration: none;
  min-height: 44px; display: flex; align-items: center;
  transition: color 300ms var(--ease-out-expo), padding-left 350ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .mega-side a:hover { color: var(--brand-600); padding-left: .4rem; }
}

.mega-cards {
  display: grid;
  /* Was one track per card, so a seven-item section squeezed every tile down
     to 110px. A fixed minimum lets the row wrap instead, which is what the
     reference does — big pictures over two rows, not a strip of chips. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: clamp(.6rem, 1.1vw, .9rem);
}
.mega-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg);
  /* 3/4 read as a thumbnail; the reference is a tall portrait. */
  aspect-ratio: 4 / 7;
  min-height: 190px;
  background: var(--stone);
  text-decoration: none;
}
/* A category the client has not sent a photo for: a plain brand tile carrying
   its name, so the menu still lists everything the section contains. */
.mega-card-bare {
  background: var(--brand-050);
  display: flex; align-items: center; justify-content: center;
}
.mega-card-bare > span {
  position: static; padding: 0.9rem;
  color: var(--brand-900); text-align: center;
}
.mega-card-bare::after { content: none; }
.mega-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms var(--ease-out-expo), opacity 500ms var(--ease-out-expo);
}
.mega-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, oklch(0.15 0.012 259 / .80) 0%, oklch(0.15 0.012 259 / .18) 58%, transparent 100%);
}
.mega-card > span {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: .85rem .8rem;
  font: 600 .7rem/1.3 var(--font-body);
  letter-spacing: .09em; text-transform: uppercase;
  color: oklch(1 0 0);
  display: grid; gap: .18rem;
}
.mega-card > span em {
  font: 400 .66rem/1 var(--font-body);
  font-style: normal; letter-spacing: .12em;
  color: oklch(1 0 0 / .72);
}
@media (hover: hover) and (pointer: fine) {
  .mega-card:hover img { transform: scale(1.07); opacity: .9; }
}
.mega-card-all {
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.mega-card-all::after { content: none; }
.mega-card-all > span {
  position: static; padding: 0; color: var(--ink); text-align: center;
}
/* Drawn, not typed. As a font glyph this arrow falls back inconsistently and
   renders on some machines as the tofu box with its own codepoint inside —
   the "92" the client was seeing next to VIEW ALL. A mask has no font
   dependency and still takes its colour from the rule. */
.mega-card-all > span::after {
  content: "";
  display: block;
  width: 1.15rem; height: 1.15rem;
  margin: 0.45rem auto 0;
  background: var(--brand-600);
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .mega-card-all:hover { background: var(--brand-050); }
}

.mega-close {
  position: absolute; top: .9rem; right: clamp(1.25rem, 5vw, 3rem);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-muted); border-radius: 50%;
  transition: color 300ms var(--ease-out-expo), background-color 300ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .mega-close:hover { color: var(--ink); background: var(--surface); }
}
.mega-close:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

/* Fewer columns before the cards get too narrow to read */
@media (max-width: 1180px) {
  .mega-cards { grid-template-columns: repeat(min(var(--cards, 5), 4), minmax(0, 1fr)); }
  .mega-cards .mega-card:nth-child(n+5) { display: none; }
  .mega-cards .mega-card-all { display: flex; }
}
@media (max-width: 900px) { .mega { display: none; } }


/* =====================================================================
   PAGE SKELETON — the structure the client decks ask for on Experiences,
   Destinations, destination detail and Itinerary. Written once, used by
   all four so the pages stop drifting apart.
   Refs in the decks: Black Tomato (structure), Original Travel (cards and
   carousels), Scott Dunn / Pangea (expert band, info panels).
   ===================================================================== */

:root { --pagenav-h: 52px; }

/* ---------- Anchor sub-nav under the hero -------------------------------
   "Imagen con H1 y menu/indice con estructura de la página" — appears in
   all four decks. Sticks below the site header; the active link is set by
   JS from an IntersectionObserver, so it is inert without scripting. */
.pagenav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--bg-page);
  border-bottom: 1px solid var(--line);
}
.pagenav-list {
  display: flex;
  /* Nine labels on a destination page overran the container by 12-28px
     between 1366 and 1920, so the bar scrolled and clipped the first
     and last words. This gap fits all nine from 1100 up. */
  gap: clamp(1rem, 2.05vw, 2.25rem);
  justify-content: flex-start;
  align-items: stretch;
  margin: 0; padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pagenav-list::-webkit-scrollbar { display: none; }
/* Only when it actually scrolls, so nothing is dimmed when all nine fit. */
.pagenav.is-scrollable .pagenav-list {
  mask-image: linear-gradient(to right, transparent 0, #000 20px,
                              #000 calc(100% - 20px), transparent 100%);
}
@media (min-width: 900px) { .pagenav-list { justify-content: center; } }
.pagenav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pagenav-h);
  padding-inline: 2px;
  white-space: nowrap;
  font: 500 0.7rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t-med) var(--ease-out-expo),
              border-color var(--t-med) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .pagenav a:hover { color: var(--ink); }
}
.pagenav a[aria-current="true"] {
  color: var(--brand-900);
  border-bottom-color: var(--brand-600);
}
.pagenav a:focus-visible { outline: 2px solid var(--brand-400); outline-offset: -4px; }

/* Anchor targets must clear both sticky bars */
[id] { scroll-margin-top: calc(var(--header-h) + var(--pagenav-h) + 8px); }


/* ---------- Horizontal rail --------------------------------------------
   Blog guides, inspiration trips, "You might also like". Scroll-snap with
   real buttons; keyboard and touch both work without JS. */
.rail { position: relative; }
.rail-track {
  display: grid;
  grid-auto-flow: column;
  /* A fixed track width, not minmax: with minmax the columns shrink to fit
     the container, the row stops overflowing and the rail silently stops
     being a rail. Fixed widths keep the next card peeking. */
  grid-auto-columns: clamp(15rem, 72vw, 19rem);
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-x);
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; }
/* The section's "see everything" link shares this row, so it sits level with
   the arrows instead of adrift below them. margin-right:auto pushes the
   arrows to the far end; without a link the row is just the two of them. */
.rail-nav {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1.25rem;
}
.rail-nav-link { margin-right: auto; }
.rail-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-page);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-med) var(--ease-out-expo),
              border-color var(--t-med) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .rail-btn:hover { background: var(--brand-050); border-color: var(--brand-400); }
}
.rail-btn:disabled { opacity: var(--opacity-disabled); cursor: default; }
.rail-btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

/* Tall editorial card for the inspiration rail (BT "Explore our top trips") */
.tall-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.4;
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--on-dark);
}
.tall-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out-expo); }
.tall-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(0.185 0.016 259 / 0.88) 8%, oklch(0.185 0.016 259 / 0.1) 62%);
}
.tall-card-body { position: absolute; inset-inline: 1.1rem; bottom: 1.1rem; z-index: 1; }
.tall-card-eyebrow {
  /* A chip, not loose text: over photography a filled ground holds at any
     exposure, and navy on amber is 8.08:1. */
  display: inline-block;
  align-self: flex-start;
  font: 600 0.6rem/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--accent-amber);
  color: var(--brand-900);
  padding: 0.34rem 0.6rem;
  border-radius: var(--radius-btn);
  margin-bottom: 0.7rem;
}
.tall-card h3 { color: var(--on-dark); font-size: 1rem; letter-spacing: 0.02em; margin-bottom: 0.75rem; }
/* The deck's cards carry a line of context under the title — duration and
   the places the trip covers — between the heading and the button. */
.tall-card-meta {
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: oklch(1 0 0 / 0.82);
}
.tall-card-cue {
  display: inline-block;
  margin-top: 0.85rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid oklch(1 0 0 / 0.7);
  border-radius: var(--radius-btn);
  font: 500 0.62rem/1 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  .tall-card:hover img { transform: scale(1.06); }
  .tall-card:hover .tall-card-cue { background: oklch(1 0 0 / 0.14); }
}

/* ---------- Benefits over a photograph ---------------------------------
   Ref Original Travel / Pangea: "A few of the benefits of travelling with
   us", a light panel laid over an image. */
.benefits {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.benefits > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.benefits::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, oklch(0.185 0.016 259 / 0.9) 0 46%, oklch(0.185 0.016 259 / 0.45) 100%);
  z-index: -1;
}
.benefits-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) { .benefits-grid { grid-template-columns: 1.05fr 0.95fr; } }
.benefits-copy h2 { color: var(--on-dark); }
.benefits-copy h2 em { color: var(--brand-200); }
.benefits-copy p { color: var(--on-dark-body); }
.benefits-panel {
  background: var(--bg-page);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.benefits-panel h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.benefits-panel ul { list-style: none; margin: 0.85rem 0 0; padding: 0; }
.benefits-panel li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.6rem;
  font-size: 0.92rem;
  color: var(--ink-body);
}
.benefits-panel li::before {
  content: "";
  position: absolute; left: 0; top: 1.05rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-600);
}

/* ---------- Value props (three columns) --------------------------------
   Deck, EXPERIENCES p3: "Nos adaptamos a tu bolsillo". */
.valueprops {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.valueprop { padding-top: 0.25rem; }
.valueprop h3 { font-size: 1.2rem; }
.valueprop p { font-size: 0.92rem; color: var(--ink-body); }

/* ---------- Differentiation panels -------------------------------------
   Ref Black Tomato "HOW WE'VE HELPED FAMILIES": large blocks, display type,
   alternating grounds drawn from the brand ramp — no new hues. */
.panels {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.panel {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  min-height: clamp(220px, 26vw, 320px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--on-dark);
}
.panel:nth-child(4n+1) { background: var(--brand-900); }
.panel:nth-child(4n+2) { background: var(--brand-700); }
.panel:nth-child(4n+3) { background: var(--brand-600); }
.panel:nth-child(4n+4) { background: var(--brand-950); }
.panel h3 {
  color: var(--on-dark);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.12;
}
.panel p { color: var(--on-dark-body); font-size: 0.92rem; }
.panel-num {
  font: 500 0.65rem/1 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-200);
  margin-bottom: 1.5rem;
}

/* ---------- Speak to our experts ---------------------------------------
   Ref Scott Dunn "Meet Our Peru Experts": faces, one line, enquiry + phone.
   The ground is the palette celeste now, not the deep navy. The band sits
   between two pale sections and the dark slab read as a hole punched in the
   page; two tones of one celeste give it a surface without a second hue.
   Portraits are still to come, so the faces slot carries a drawn mark. */
.experts {
  background: var(--brand-150);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4.4vw, 3.25rem) clamp(1.5rem, 4vw, 3.25rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
/* Between 780 and 1080 the two buttons are wider than the column left for the
   copy, so the sentence breaks into four lines beside them. Give the actions
   their own row there and the copy reads in two. */
@media (min-width: 780px) { .experts { grid-template-columns: auto 1fr; }
  .experts-actions { grid-column: 1 / -1; }
/* Its section carries u-pt-0 so it does not double up on the one above, but
   that left the band touching whatever ends there — usually a photo. */
.experts { margin-top: clamp(2rem, 4vw, 3.5rem); } }
@media (min-width: 1080px) {
  .experts { grid-template-columns: auto 1fr auto; }
  .experts-actions { grid-column: auto; }
}

/* The drawn mark holds the slot the three portraits will take, so it draws
   what is coming: people. A bubble read as a second WhatsApp glyph. */
.experts-mark {
  display: grid; place-items: center;
  width: clamp(3rem, 5.5vw, 4.25rem);
  height: clamp(3rem, 5.5vw, 4.25rem);
  color: var(--brand-950);
  flex: none;
}
.experts-mark svg { width: 100%; height: 100%; }
.experts:has(.experts-faces img) .experts-mark { display: none; }

.experts-faces { display: flex; }
/* Placeholders only: hidden until the client sends portraits. Three dashed
   circles with a question mark in them read as failed images, and the band
   works without them. */
.experts-faces:has(.is-empty) { display: none; }
.experts-faces > * {
  width: 62px; height: 62px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--brand-150);
  background: var(--brand-700);
  margin-left: -16px;
  flex: none;
}
.experts-faces > *:first-child { margin-left: 0; }
.experts-faces img { width: 100%; height: 100%; object-fit: cover; }
.experts-faces .is-empty {
  display: grid; place-items: center;
  font: 500 0.6rem/1 var(--font-body);
  color: var(--on-dark-muted);
  background: var(--brand-950);
  border-style: dashed;
}
/* 11.1:1 on the celeste. */
.experts h2 {
  color: var(--brand-950);
  font-size: clamp(1.55rem, 2.9vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
/* 8.3:1. Tinted from the same hue as the ground, never grey. */
.experts p {
  color: var(--brand-900);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.55;
  max-width: 48ch;
}
.experts-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
/* Bigger than the page default: this is the band's whole purpose. */
.experts .btn { padding: 1.1rem 2.05rem; font-size: 0.78rem; }


/* ---------- Tabsets ----------------------------------------------------
   Two uses from the decks: season tabs on a destination ("¿Cuándo visitar
   Perú?") and the Original Travel "Useful information" panel. Buttons are
   a real tablist; without JS every panel stays open and readable. */
.tabset { margin-top: 0.5rem; }
.tablist {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.tablist::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-page);
  color: var(--ink-secondary);
  font: 500 0.82rem/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-med);
}
.tab[aria-selected="true"] {
  background: var(--brand-900);
  border-color: var(--brand-900);
  color: var(--on-dark);
}
@media (hover: hover) and (pointer: fine) {
  .tab:not([aria-selected="true"]):hover { border-color: var(--brand-400); color: var(--ink); }
}
.tab:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.tabpanel { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.tabpanel[hidden] { display: none; }
/* A panel that is prose and nothing else: the 62ch measure cap left the whole
   right half of a 1104px row empty. The block is centred instead and its mark
   holds the left, so the two margins balance and the panel reads as placed
   rather than abandoned. */
/* :not([hidden]) is not decoration. Without it this rule ties .tabpanel[hidden]
   on specificity and, coming later, wins — every panel in the set rendered at
   once, stacked under the tabs. */
.tabpanel:not([hidden]):not(:has(.tabpanel-split)) {
  --mark-w: clamp(1.9rem, 3vw, 2.4rem);
  display: grid;
  /* A third column the width of the mark, left empty, or the grid centres as
     mark-plus-text and the copy itself sits off-centre by half the mark. */
  grid-template-columns: var(--mark-w) minmax(0, 1fr) var(--mark-w);
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  align-items: start;
  max-width: 68rem;
  margin-inline: auto;
}
/* Two columns, so the copy fills the row instead of stopping at its measure
   cap halfway across and leaving the right half of the panel empty. */
.tabpanel-body {
  grid-column: 2;
  columns: 2;
  column-gap: clamp(1.75rem, 3.5vw, 3rem);
}
.tabpanel-body > p { max-width: none; margin: 0 0 1rem; }
.tabpanel-body > p:last-child { margin-bottom: 0; }
@media (max-width: 780px) { .tabpanel-body { columns: 1; } }
.tabpanel-mark {
  grid-row: 1 / -1;
  display: block;
  width: 100%;
  height: var(--mark-w, 2.4rem);
  color: var(--brand-600);
  margin-top: 0.15rem;
}
.tabpanel-mark svg { width: 100%; height: 100%; }
@media (max-width: 620px) {
  .tabpanel:not([hidden]):not(:has(.tabpanel-split)) { grid-template-columns: 1fr; }
  .tabpanel-body { grid-column: 1; }
  /* One column: width:100% would stretch the mark across the whole row and
     squash the drawing inside it. Square again. */
  .tabpanel-mark { grid-row: auto; width: var(--mark-w, 2.4rem); }
}
/* Three lines of copy beside a 380px photograph left the void entirely
   under the text. Centred, it splits above and below. */
.tabpanel-split { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 820px) { .tabpanel-split { grid-template-columns: 1fr 1fr; } }
.tabpanel-split img { border-radius: var(--radius-card); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; max-height: 380px; }
.factlist { list-style: none; margin: 1.25rem 0 0; padding: 0; }
/* Every row still waiting on the client: the list keeps its top margin
   and pushes the column down for nothing. */
.factlist:not(:has(li:not([data-tbc]))) { display: none; }
.factlist li {
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--ink-body);
}
.factlist dt, .factlist .factlist-key {
  font: 500 0.66rem/1.4 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-secondary);
}

/* ---------- FAQ accordion ----------------------------------------------
   Ref Black Tomato. Native <details> so it works with scripting off and
   survives the move to WordPress without a JS dependency. */
.faq-head { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.faq-head .eyebrow { justify-content: center; }
.faq-head p { margin-inline: auto; }
.faqs { max-width: 880px; margin-inline: auto; }
/* No painted ground either: the rows are separated by a rule, not by a box.
   With a background they became white strips whose question sat 4px from the
   painted edge while the chevron sat 28px from the other — visibly lopsided. */
.faq {
  border-bottom: 1px solid var(--line);
}
.faq > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 56px;
  padding: 1.15rem 0;
  font: 500 0.78rem/1.45 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--t-med) var(--ease-out-expo);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-med) var(--ease-out-expo);
  color: var(--ink-muted);
}
.faq[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq[open] > summary { color: var(--brand-900); }
@media (hover: hover) and (pointer: fine) {
  .faq > summary:hover { color: var(--brand-600); }
}
.faq > summary:focus-visible { outline: 2px solid var(--brand-400); outline-offset: -2px; }
.faq-body { padding: 0 0 1.5rem; }
.faq-body p { font-size: 0.95rem; color: var(--ink-body); max-width: 70ch; }
.faq-body p + p { margin-top: 0.75rem; }

/* ---------- Route map --------------------------------------------------
   "Your route through Peru". The map itself is an image supplied per trip;
   the stop list beneath it carries the same information as text. */
.routemap {
  display: grid;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
@media (min-width: 820px) { .routemap { grid-template-columns: 0.8fr 1.2fr; align-items: center; } }
.routemap-copy { padding: clamp(1.5rem, 3vw, 2.5rem); }
.routemap-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.routemap-stops { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.routemap-stops li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-body);
}
.routemap-stops li::before {
  content: "";
  position: absolute; left: 2px; top: 0.95rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.routemap-stops li:not(:last-child)::after {
  content: "";
  position: absolute; left: 5.5px; top: 1.6rem; bottom: -0.3rem;
  border-left: 1px dashed var(--brand-400);
}
.routemap-media { min-height: 240px; background: var(--brand-050); }
.routemap-media img { width: 100%; height: 100%; object-fit: cover; }
.routemap-media[data-placeholder] {
  display: grid; place-items: center;
  padding: 2rem;
}

/* ---------- Day-by-day with a sticky map -------------------------------
   Deck, ITINERARIO p2: "Itinerario en vertical", ref Original Travel. The
   map holds while the days scroll past it. Single column on small screens,
   where a sticky map would eat the viewport. */
.dayline { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 900px) { .dayline { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.dayline-map { display: none; }
@media (min-width: 900px) {
  .dayline-map {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--pagenav-h) + 1.5rem);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--surface);
  }
  .dayline-map img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .dayline-map[data-placeholder] {
    display: grid; place-items: center;
    aspect-ratio: 3 / 4;
    border: 1px dashed var(--line);
    padding: 2rem;
  }
}
.dayline-days { list-style: none; margin: 0; padding: 0; }
.dayline-day { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.dayline-day:first-child { padding-top: 0; }
.dayline-day .day-label {
  font: 500 0.64rem/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-600);
  display: block;
  margin-bottom: 0.6rem;
}
.dayline-day h3 { font-size: 1.2rem; }
.dayline-day p { font-size: 0.95rem; color: var(--ink-body); }
.dayline-day p + p { margin-top: 0.7rem; }

/* ---------- What to bring ----------------------------------------------
   Deck, ITINERARIO p3, marked as missing: "Falta: WHAT TO BRING? Que traer?" */
.bring {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.bring-group h3 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-secondary);
}
.bring-group ul { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.bring-group li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-body);
}
.bring-group li::before {
  content: "";
  position: absolute; left: 0; top: 0.95rem;
  width: 7px; height: 2px;
  background: var(--brand-400);
}

/* ---------- Suggestions ------------------------------------------------
   Deck, ITINERARIO p4: "Texto informativo sobre que otras actividades se
   pueden hacer en este viaje." */
.suggestions {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
.suggestion { padding-block: clamp(1rem, 2vw, 1.5rem); }
.suggestion:first-of-type { padding-top: 0.25rem; }
.suggestion h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-900);
}
.suggestion p { font-size: 0.93rem; color: var(--ink-body); max-width: 76ch; }

/* ---------- Editorial alternating rows ---------------------------------
   Deck, DESTINATIONS p4: "Contenido dentro de la página con CTA que llevan
   a un formulario." Ref Black Tomato "What to see and do". */
.edrow {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
@media (min-width: 820px) {
  .edrow { grid-template-columns: 1fr 1fr; }
  .edrow-media { height: clamp(200px, 20vw, 260px); }
  .edrow-media img { height: 100%; aspect-ratio: auto; }
}
.edrow:first-of-type { padding-top: 0; }
.edrow img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
@media (min-width: 820px) {
  .edrow-reverse .edrow-media { order: -1; }
}
.edrow h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-900);
  margin-bottom: 0.85rem;
}
.edrow p { font-size: 0.95rem; color: var(--ink-body); }
.edrow .btn { margin-top: 1.25rem; }

/* ---------- Places grid ------------------------------------------------
   Deck, DESTINATIONS p2: "Countries → Places", ref Black Tomato. Name laid
   over the photograph, nothing else. */
.places {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Five places, three across: wider cards than the auto-fit default gives
   them, and no ragged row of one. */
.places-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .places-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .places-3 { grid-template-columns: 1fr; } }

.place {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  transition: transform var(--t-med) var(--ease-out-expo),
              box-shadow var(--t-med) var(--ease-out-expo),
              border-color var(--t-med) var(--ease-out-expo);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.place img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out-expo);
}
.place::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: oklch(0.185 0.016 259 / 0.32);
  transition: background-color var(--t-med) var(--ease-out-expo);
}
.place span {
  font: 500 0.78rem/1.3 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark);
  text-align: center;
  padding: 0.5rem 1rem;
  text-shadow: 0 1px 12px oklch(0.185 0.016 259 / 0.7);
}
@media (hover: hover) and (pointer: fine) {
  /* Three things at once, or the change reads as a rendering glitch rather
     than an answer: the photograph pushes in, the veil lifts, and the card
     itself rises off the page. */
  .place:hover img { transform: scale(1.05); }
  .place:hover::after { background: oklch(0.185 0.016 259 / 0.15); }
  .place:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px oklch(0.255 0.060 259 / 0.18);
  }
  .place[data-placeholder]:hover { border-color: var(--brand-400); }
}
@media (prefers-reduced-motion: reduce) {
  .place, .place img { transition: none; }
  .place:hover { transform: none; }
  .place:hover img { transform: none; }
}
.place:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 3px; }
/* Three of the seven places the client asked for have no photograph yet.
   The tile still exists so the set is complete, but it reads as unfinished
   rather than borrowing an image from somewhere else. */
.place[data-placeholder] {
  background: var(--surface);
  border: 1px dashed var(--line);
  flex-direction: column;
}
.place[data-placeholder]::after { content: none; }
.place[data-placeholder] span { color: var(--ink-secondary); text-shadow: none; }
.place-pending {
  display: block;
  margin-top: 0.6rem;
  font: 400 0.62rem/1.5 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-secondary);
}

/* ---------- Overview trio ----------------------------------------------
   Deck, ITINERARIO p2: WHEN · PRICE · HOW LONG under the intro. */
.trio {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  text-align: center;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.trio-key {
  display: block;
  font: 500 0.66rem/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
}
.trio-val { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.trio-note { display: block; font-size: 0.78rem; color: var(--ink-secondary); margin-top: 0.3rem; }

/* ---------- Split intro with an image ----------------------------------
   Deck, EXPERIENCES p2: "Faltaría agregar una imagen referente a la
   experiencia." */
.introsplit { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 860px) {
  .introsplit { grid-template-columns: 0.95fr 1.05fr; }
  .introsplit-media { height: clamp(260px, 26vw, 360px); }
  .introsplit-media img { height: 100%; aspect-ratio: auto; }
}
.introsplit img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.introsplit-body p + p { margin-top: 1rem; }

/* ---------- What to see and do -----------------------------------------
   One stop per slide, the slide the width of the viewport: copy on the left,
   photograph on the right, and the next stop arrives in its place. The track
   is full-bleed; the content inside each slide sits in the same container as
   the rest of the page, so nothing shifts as it advances. */
.seedo-rail .rail-track {
  grid-auto-columns: 100%;
  gap: 0;
  padding-inline: 0;
  scroll-padding-left: 0;
  padding-bottom: 0;
}
/* The slide is the full width of the track; the panel inside it is the page's
   own .wrap, so one slide reads as one object rather than as loose copy that
   happens to move. The photograph runs to the panel's own edge. */
.seedo-slide { display: block; }
.seedo-split {
  display: grid;
  align-items: stretch;
  padding: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t-med) var(--ease-out-expo);
}
@media (min-width: 780px) { .seedo-split { grid-template-columns: 1fr 1.05fr; } }
.seedo-copy {
  padding: clamp(1.5rem, 3.2vw, 3rem);
  display: flex; flex-direction: column; justify-content: center;
}
.seedo-copy h3 { margin-bottom: 0.75rem; }
.seedo-copy p { color: var(--ink-body); max-width: 46ch; }
.seedo-copy .btn { align-self: flex-start; margin-top: 1.5rem; }
.seedo-media { min-height: clamp(220px, 30vw, 420px); }
.seedo-media img,
.seedo-media .media-pending {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.seedo-media img { transition: transform 800ms var(--ease-out-expo); }
@media (hover: hover) and (pointer: fine) {
  /* Not a link, so the answer stays quiet: the photograph pushes in and the
     panel lifts off the page a little. */
  .seedo-split:hover { box-shadow: 0 16px 40px oklch(0.255 0.060 259 / 0.14); }
  .seedo-split:hover .seedo-media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .seedo-media img, .seedo-split { transition: none; }
  .seedo-split:hover .seedo-media img { transform: none; }
}
/* The arrows belong to the slide above them, not to the section break. */
.seedo-rail .rail-nav {
  max-width: var(--wrap-max);
  margin: 1rem auto 0;
  padding-inline: var(--pad-x);
}

/* ---------- Photographs in the split intro ------------------------------
   The rail component with one photograph per slide: same track, same two
   script, so there is no second carousel to keep alive. No buttons: it moves
   on its own, and stops the moment the reader shows interest in it. */
.mediarail { position: relative; height: 100%; }
.mediarail .rail-track {
  grid-auto-columns: 100%;
  gap: 0;
  height: 100%;
  padding-bottom: 0;
  border-radius: var(--radius-card);
}
.mediarail .rail-track > img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  scroll-snap-align: center;
}

/* ---------- Indicative price row --------------------------------------
   Deck, Machu Picchu p4: a row of "precio orientativo por persona" cards
   under the travel styles, each with its own enquiry button. */
.pricerow {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pricecard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pricecard.is-featured { border-color: var(--brand-600); background: var(--brand-050); }
.pricecard-amount {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--brand-900);
}
.pricecard-amount.is-pending {
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-secondary);
}
.pricecard-note { font-size: 0.72rem; color: var(--ink-secondary); line-height: 1.45; }
.pricecard .btn { margin-top: auto; padding: 0.8rem 1rem; font-size: 0.68rem; }

/* Placeholder media, used until the client supplies photographs */
.media-pending {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 1.5rem;
  text-align: center;
}


/* Hero microcopy — the reassurance line the Home deck asks for under the
   buttons: "Free personalized quote · Local Peru specialists · Support
   throughout your journey". */
.hero-microcopy {
  margin-top: 1.4rem;
  font-size: 0.82rem;
  color: oklch(1 0 0 / 0.78);
  max-width: none;
}
@media (max-width: 680px) { .hero-microcopy { font-size: 0.78rem; } }


.final-cta-micro, .how-micro, .responsible-micro, .value-micro, .guides-note {
  font-size: 0.82rem;
  line-height: 1.55;
  margin-block: 0.9rem 1.4rem;
  max-width: 52ch;
}
.final-cta-micro { color: var(--on-dark-muted); }
.how-micro { color: var(--on-dark-muted); }
.responsible-micro, .value-micro, .guides-note { color: var(--ink-secondary); }
.guides-note { margin-bottom: 0.9rem; max-width: 46ch; }

.footer-top-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.footer-badges {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--on-dark-muted);
}
.footer-contact-note {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--on-dark-body);
  margin-bottom: 0.9rem;
  max-width: 34ch;
}
.footer-city { font-size: 0.85rem; color: var(--on-dark-muted); margin-top: 0.4rem; }
.footer-send { display: block; margin-top: 1rem; }
.footer-send strong { display: block; }
.footer-send span { display: block; font-size: 0.78rem; color: var(--on-dark-muted); }


/* ============ Spacing repairs ============
   Measured, not guessed: at 1280 these stacked siblings were between 0 and
   6px apart, so a tag, a title and a paragraph read as one block of text. */

/* Guide cards: tag, heading and description were all touching. */
.guide-card .guide-tag { margin-bottom: 0.6rem; }
.guide-card h3 { margin-bottom: 0.55rem; }

/* A heading and the lead paragraph under it, where the two stack. */
.trending-head h2 + .section-head-lead,
.section-head-main h2 + .section-head-lead { margin-top: 0.9rem; }

/* The utility this list asked for did not exist, so it inherited nothing. */
.u-mt-sm { margin-top: 1.1rem; }

/* Two paragraphs of footer blurb ran together. */
.footer-brand p + p { margin-top: 0.7rem; }

/* Role cards sat 6px above the portraits below them. */
.valueprops + .team-grid { margin-top: clamp(2rem, 4vw, 3rem); }

/* Hero: the reassurance line was 4px under the buttons. */
.hero-actions + .hero-microcopy { margin-top: 1.5rem; }

/* Footer link lists: 6px on a 1.7 line-height reads as a wall. */
.footer-col a { padding-block: 0.15rem; }


/* ============ Alignment and label repairs ============ */

/* Root cause of the misaligned heads: the eyebrow and the lead are <p>, and
   the global `p { max-width: 62ch }` caps them. Inside a centred block that
   cap leaves the box pinned left while the h2 — not a <p> — centres. Every
   centred head needs the auto inline margin the heading gets for free. */
.trending-head > p,
.faq-head > p,
.guides-more > p,
.u-center > p { margin-inline: auto; }

/* Amber badges got a background but kept padding:0, so the text touched the
   edges. A label on a ground needs room. */
.trending-badge {
  padding: 0.34rem 0.7rem;
  border-radius: var(--radius-btn);
  line-height: 1;
}
.experts-faces .is-empty { padding: 0; display: grid; place-items: center; }

/* Microcopy sat orphaned below its button. Tie it to the action it explains. */
.guides-more > .btn + p,
.value-micro, .how-micro {
  margin-top: 0.85rem;
  text-align: center;
}

/* Value cards were a rule, a title and a paragraph — nothing to look at.
   The icon sits above the rule and gives each card an anchor. */
.value-card .value-icon {
  display: block;
  width: 26px; height: 26px;
  margin-bottom: 0.9rem;
  color: var(--accent-orange);
}


/* Reassurance in the hero. Enrique's note was about what to convey, not a
   string to paste under every button — it appeared four times, three of them
   the same sentence reordered. It survives once, here, as checked items
   instead of a run-on caption. */
.hero-assurances {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
.hero-assurances li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.84rem;
  color: oklch(1 0 0 / 0.82);
}
.hero-assurances li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  font-weight: 700;
  color: var(--accent-orange);
}
@media (max-width: 680px) {
  .hero-assurances { gap: 0.3rem 1rem; }
  .hero-assurances li { font-size: 0.79rem; }
}

/* ============ Deck layouts (pages 7-11) ============
   Three structures the deck draws that the copy pass alone could not create:
   the roles as a 2x2 block on a filled ground, the team as one large portrait
   beside three small ones, and Trending as three cards of equal weight. */

/* --- p7-8 · the four roles as photo cards: one large, three small.
   The deck asks for this block to read "similar a itinerarios de
   inspiración", so it borrows that block's scrim-over-photo treatment. --- */
.rolecards {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  align-items: stretch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.rolecard-stack {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}
.rolecard {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--stone);
  min-height: 150px;
}
.rolecard-feature { min-height: clamp(360px, 42vw, 520px); }
.rolecard img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Same scrim as the inspiration cards, so white copy holds over any photo. */
.rolecard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    oklch(0.185 0.016 259 / 0.90) 8%,
    oklch(0.185 0.016 259 / 0.62) 46%,
    oklch(0.185 0.016 259 / 0.22) 100%);
}
.rolecard-body {
  position: absolute; inset-inline: 1.1rem; bottom: 1.05rem;
  z-index: 1;
}
.rolecard-body h3 {
  color: var(--on-dark);
  font-size: 1rem; letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  display: flex; align-items: baseline; gap: 0.55rem;
}
.rolecard-body h3::before {
  content: ""; flex: 0 0 auto;
  width: 1.4rem; height: 2px;
  background: var(--accent-amber);
  transform: translateY(-0.28em);
}
.rolecard-feature .rolecard-body h3 { font-size: 1.3rem; }
.rolecard-body p {
  color: oklch(1 0 0 / 0.88);
  font-size: 0.84rem; line-height: 1.5;
  margin: 0; max-width: 46ch;
}
.rolecard-feature .rolecard-body p { font-size: 0.92rem; }
@media (max-width: 900px) {
  .rolecards { grid-template-columns: 1fr; }
  .rolecard-feature { min-height: clamp(280px, 46vw, 380px); }
  .rolecard-stack { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .rolecard-stack { grid-template-columns: 1fr; }
  .rolecard { min-height: 180px; }
}

/* --- p9-10 · Trending as three cards of equal weight --------------------- */
/* The block is the site's rail component: it scrolls, and main.js reveals the
   arrows on its own as soon as the track overflows (and hides them when it
   does not). So the two modes come from one piece of markup.

   Wide enough for three: a plain three-track grid, nothing to scroll, arrows
   stay hidden — with only three cards, everything is already on screen and a
   carousel there would just be two dead buttons.

   Narrower: the rail takes over, fixed track widths so the next card peeks
   and the row genuinely overflows. Never two columns, which is what left one
   card orphaned on its own row. */
.ideagrid {
  grid-auto-columns: clamp(16rem, 74vw, 22rem);
  gap: clamp(1rem, 2vw, 1.6rem);
}
/* Home runs this grid inside a rail on small screens. The standalone
   listings do not, so they get real columns at every width. */
.ideagrid:not(.rail-track) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (min-width: 1100px) {
  .ideagrid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }
}
@media (max-width: 1040px) { .ideagrid:not(.rail-track) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ideagrid:not(.rail-track) { grid-template-columns: 1fr; } }

/* The same tall card as "Six ways to meet Peru", but six of them rather than
   eight, so three across leaves neither row ragged. align-items:start, not
   stretch: a stretched grid item takes its height from the row, and the card's
   aspect-ratio would then derive its WIDTH from that height. */
.ideagrid.tall-grid-exp {
  align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ideagrid.tall-grid-exp > .tall-card-wide { aspect-ratio: 4 / 5.2; }
@media (max-width: 1040px) { .ideagrid.tall-grid-exp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ideagrid.tall-grid-exp { grid-template-columns: 1fr; } }

/* Eight cards want four across, and the wider container the six used to
   have: inside the 1200px cap they came out too small for the photographs.
   Carries the same :not() as the rule above it, or that one's extra class
   outweighs this and the grid silently stays at three. */
.ideagrid-4:not(.rail-track) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wrap:has(> .ideagrid-4) { max-width: 1600px; }
@media (max-width: 1280px) { .ideagrid-4:not(.rail-track) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1040px) { .ideagrid-4:not(.rail-track) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ideagrid-4:not(.rail-track) { grid-template-columns: 1fr; } }




/* --- CTA rows introduced by the deck ------------------------------------ */
.final-cta-actions, .guides-more-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.guides-more-actions { justify-content: center; }

/* --- p4 · the deck lists the trip length as its own line, between the tag
   and the title, so it stops being glued onto the meta line. --- */
.tall-card-days {
  display: block;
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark);
  /* Top corner, out of the stack at the foot of the card: it is the one fact
     you scan a row of these for. Its own scrim, because the gradient below
     only darkens the bottom. */
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  margin: 0;
  padding: 0.32rem 0.55rem;
  background: oklch(0.185 0.016 259 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-btn);
}
/* --- p12 · the CTA that closes the value block --- */