/* Experiences lane: owner review round 3 (2026-10-11). Loads after site.css. */

/* #16 The category menu: sticks under the site header while the categories scroll by, one chip per category in its
   color (ours sol, sea mar, land selva, rest buganvilia; .co-cat-* in site.css), the chip whose section is in view
   filled (aria-current, set by site.js). Phones scroll it sideways with the next chip's edge in view. */
.exp-nav-bar { position: sticky; top: 64px; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .exp-nav-bar { top: 96px; } }
.exps .exp-nav { gap: 8px; padding-top: 10px; padding-bottom: 10px; scroll-snap-type: x proximity; scroll-padding-inline: var(--space-4); }
.exps .exp-nav a { scroll-snap-align: start; gap: 10px; border-radius: var(--radius-pill); border-color: var(--line-strong); background: var(--surface); font-size: 15px; transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out); }
.exps .exp-nav a::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cat, var(--ink)); box-shadow: inset 0 0 0 1.5px var(--surface); outline: 1px solid var(--cat, var(--ink)); }
.exps .exp-nav a:hover { background: color-mix(in srgb, var(--cat, var(--ink)) 12%, var(--surface)); }
.exps .exp-nav a[aria-current="true"] { background: var(--cat, var(--ink)); border-color: var(--cat, var(--ink)); color: var(--on-cat, var(--cal)); }
.exps .exp-nav a[aria-current="true"]::before { background: var(--on-cat, var(--cal)); outline-color: var(--on-cat, var(--cal)); box-shadow: inset 0 0 0 1.5px var(--cat, var(--ink)); }
.exps .exp-nav a.is-book { background: var(--negro); border-color: var(--negro); color: var(--cal); }
.exps .exp-nav a.is-book::before { display: none; }
.exps .exp-nav a.is-book:hover { background: color-mix(in srgb, var(--negro) 85%, var(--cal)); }
/* A jump lands its heading just below the header and the menu: one offset for the whole page, nothing added per section. */
html:has(.exp-nav-bar) { scroll-padding-top: 136px; }
@media (min-width: 1024px) { html:has(.exp-nav-bar) { scroll-padding-top: 172px; } }
@media (prefers-reduced-motion: no-preference) { html:has(.exp-nav-bar) { scroll-behavior: smooth; } }
.exps:not(.is-detail) :is(.exp-group, .exp-sub, .feat, .exp, .exp-form) { scroll-margin-top: 0; }
.exps:not(.is-detail) .exp-sub { padding-top: var(--space-6); }

/* #14 The shuttle board, after the reception board and the printed tickets: the Experiencias pair (mar ground, a sol
   band), square walls, the brand's two faces. Departures are split-flap tiles (sol on negro, a seam across the
   middle, as on a Solari board); every row reads time-first and left to right like an SBB departure board; the fare
   sits once, in its own column. Full width under the shuttle's photo and words, so it is the first thing seen. */
.feat.has-board .feat-board { grid-column: 1 / -1; order: 3; }
@media (max-width: 899px) { .feat.has-board .feat-board { margin-inline: calc(-1 * var(--space-4)); } }
.board { background: var(--mar); color: var(--cal); border: 0; border-top: var(--stroke-band) solid var(--sol); border-radius: 0; padding: var(--space-5) var(--space-4) var(--space-4); box-shadow: none; }
@media (min-width: 900px) { .board { padding: var(--space-6) var(--space-6) var(--space-5); } }
.board-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--space-4); margin-bottom: var(--space-4); }
.board-h { margin: 0; font: 600 30px/1.1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: 0; text-transform: none; color: var(--cal); display: block; }
@media (min-width: 900px) { .board-h { font-size: 40px; } }
.board-from { margin: 0; font: 600 15px/1.4 var(--font-text); color: var(--cal); }
.board-cols { display: none; }
.board-rows { list-style: none; margin: 0; padding: 0; }
.board-row { padding: var(--space-4) 0; border-top: 1px solid color-mix(in srgb, var(--cal) 35%, var(--mar)); }
.board-to { margin: 0 0 var(--space-3); font: 600 26px/1.15 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.board-row dl { margin: 0; display: grid; gap: var(--space-3); }
.board-row dl > div { display: grid; gap: 6px; }
.board-row dt { font: 700 14px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; }
.board-row dd { margin: 0; }
.board-fare { grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--space-3); }
.board-fare dt { grid-column: 1 / -1; }
.board-times { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.board-times time { font: 600 18px/1.2 var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-times small, .flap small { font-size: 14px; font-weight: 600; }
.board-back .board-times { column-gap: var(--space-4); }
.flap { position: relative; display: inline-flex; align-items: baseline; gap: 5px; padding: 10px 9px 9px; background: var(--negro); color: var(--sol) !important; font: 700 22px/1 var(--font-text) !important; letter-spacing: -.01em; }
@media (min-width: 900px) { .flap { gap: 6px; padding: 11px 12px 10px; font-size: 26px !important; } }
.flap small { color: var(--cal); }
/* The flap's hinge: a notch at each edge where the two halves meet, never a line through the digits. */
.flap::before, .flap::after { content: ""; position: absolute; top: 50%; width: 3px; height: 2px; margin-top: -1px; background: var(--mar); }
.flap::before { left: 0; } .flap::after { right: 0; }
.board-usd { display: inline-block; font: 700 30px/1 var(--font-text); font-variant-numeric: tabular-nums; color: var(--sol); }
.board-fare small { display: block; font: 600 15px/1.3 var(--font-text); margin-top: 6px; }
.board-ask { display: inline-flex; align-items: center; min-height: 44px; color: var(--cal); font: 700 17px/1.2 var(--font-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--sol); }
.board-ask:hover { color: var(--sol); }
.board-foot { margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--cal) 35%, var(--mar)); }
.board-foot .x-actions { margin: 0; }
.board-foot .co-btn-outline { color: var(--cal); border-color: var(--cal); background: transparent; }
.board-foot .co-btn-outline:hover { background: color-mix(in srgb, var(--cal) 14%, var(--mar)); }
.board :focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
@media (min-width: 900px) {
  .board-cols, .board-row { display: grid; grid-template-columns: minmax(210px, 1.4fr) 2.4fr 1.8fr 1.1fr; column-gap: var(--space-4); }
  .board-cols { padding-bottom: var(--space-2); font: 700 14px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; }
  .board-row { align-items: center; }
  .board-row dl, .board-row dl > div { display: contents; }
  .board-row dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .board-to { margin: 0; }
  .board-fare dd { align-self: center; }
}
/* The flaps fall into place once, when the board scrolls in: an ease-out turn, no overshoot, row by row. */
.feat.is-in .board td b { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .feat.has-board.is-in .flap { animation: board-flap var(--duration-move) var(--ease-out) both; transform-origin: 50% 50%; }
  .feat.has-board.is-in .board-row:nth-child(2) .flap { animation-delay: 90ms; }
  .feat.has-board.is-in .board-row:nth-child(3) .flap { animation-delay: 180ms; }
}
@keyframes board-flap { from { transform: perspective(300px) rotateX(-80deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* #18 Where to next: one table, a row per destination, the shared shuttle and the private taxi side by side, the
   cheaper way for your group marked (radios + :has, no script). */
.exp-trans-sec .routes, .exp-where .routes { margin-top: var(--space-5); }
.exp-where { padding: var(--space-6) 0 var(--space-4); }
.exp-where h2 { margin: 0; }
.rt-pick { border: 0; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--space-3); }
.rt-pick legend { float: left; margin-right: var(--space-3); font: 700 17px/44px var(--font-text); padding: 0; }
.rt-ns { display: inline-flex; gap: 6px; }
.rt-n { position: relative; display: block; cursor: pointer; }
.rt-n input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rt-n span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: var(--surface-raised); font: 700 18px/1 var(--font-text); font-variant-numeric: tabular-nums; transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }
.rt-n:hover span { border-color: var(--ink); }
.rt-n input:checked + span { background: var(--negro); border-color: var(--negro); color: var(--cal); }
.rt-n input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.rt-hint { flex-basis: 100%; margin: 0; font-size: 15px; color: var(--ink-muted); }
@media (min-width: 700px) { .rt-hint { flex-basis: auto; } }
.rt { width: 100%; border-collapse: collapse; background: var(--surface-raised); font-variant-numeric: tabular-nums; table-layout: fixed; }
.rt thead th { text-align: left; vertical-align: bottom; padding: var(--space-3); border-bottom: var(--stroke-rule) solid var(--ink); font: 700 16px/1.25 var(--font-text); }
.rt thead th:first-child { width: 32%; }
.rt thead .rt-s { border-top: 6px solid var(--mar); }
.rt thead .rt-t { border-top: 6px solid var(--negro); }
.rt thead small { display: block; margin-top: 4px; font: 500 14px/1.35 var(--font-text); color: var(--ink-muted); }
.rt tbody th, .rt td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--line); }
.rt tbody th { font: 600 19px/1.2 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.rt td .nw, .rt td .rt-tot { white-space: nowrap; }
.rt tbody th small, .rt td small { display: block; margin-top: 4px; font: 500 14px/1.35 var(--font-text); color: var(--ink-muted); }
.rt td b { display: block; font: 700 22px/1.1 var(--font-text); }
.rt td.is-none span { font-size: 14px; color: var(--ink-muted); }
.rt-best { display: none; width: max-content; margin-bottom: 6px; padding: 3px 8px; background: var(--sol); color: var(--on-light); font: 700 14px/1.2 var(--font-text); }
.rt td .rt-tot { display: none; }
.routes:has(.rt-n input[value="1"]:checked) .is-best-1,
.routes:has(.rt-n input[value="2"]:checked) .is-best-2,
.routes:has(.rt-n input[value="3"]:checked) .is-best-3,
.routes:has(.rt-n input[value="4"]:checked) .is-best-4 { background: color-mix(in srgb, var(--sol) 26%, var(--surface-raised)); }
.routes:has(.rt-n input[value="1"]:checked) .is-best-1 .rt-best,
.routes:has(.rt-n input[value="2"]:checked) .is-best-2 .rt-best,
.routes:has(.rt-n input[value="3"]:checked) .is-best-3 .rt-best,
.routes:has(.rt-n input[value="4"]:checked) .is-best-4 .rt-best { display: block; }
.routes:has(.rt-n input[value="2"]:checked) .rt-tot-2,
.routes:has(.rt-n input[value="3"]:checked) .rt-tot-3,
.routes:has(.rt-n input[value="4"]:checked) .rt-tot-4 { display: block; color: var(--ink); font-weight: 700; }
@media (min-width: 900px) {
  .rt thead th:first-child { width: 40%; }
  .rt tbody th { font-size: 22px; }
  .rt td b { font-size: 24px; }
}
.exp-trans-sec .exp-any, .exp-where .exp-any { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); padding: var(--space-4); background: var(--surface-raised); border-left: var(--stroke-band) solid var(--mar); }
.exp-any p { margin: 0; max-width: 46rem; }
.exp-any .co-btn { margin-top: 0; }
@media (min-width: 900px) { .board-back time { font-size: 20px; } }
.rt thead time { white-space: nowrap; }

/* 2026-10-20 High-season marks, the onward-shuttle schedule and Managua. The asterisk marks a departure that runs in
   high season only; its meaning is printed once under the board or table. Same board look as the beach shuttle. */
.hs { margin-left: 2px; border: 0; text-decoration: none; cursor: help; font-weight: 700; color: var(--sol); }
.board-note { margin: var(--space-3) 0 0; font: 500 15px/1.4 var(--font-text); color: var(--cal); max-width: 46rem; }
.board-note + .board-note { margin-top: var(--space-2); }
.board-foot .board-note, .board-rows + .board-note { padding-top: var(--space-3); }
.exp-when { padding: var(--space-4) 0 var(--space-4); }
.exp-when h2 { margin: 0 0 var(--space-4); }
.sch .board-to small { display: block; margin-top: 4px; font: 500 15px/1.3 var(--font-text); }
.sch-row dl { grid-template-columns: 1fr; }
.sch-row .sch-back dt, .sch-row .sch-out dt { display: block; }
.sch-ask { margin-top: var(--space-2); }
@media (min-width: 900px) {
  .sch .board-row { grid-template-columns: minmax(210px, 1.4fr) 3.4fr 1.5fr; }
  .sch-row dl { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .sch-row dl > div { display: grid; gap: 6px; }
  .sch-row dt { position: static; width: auto; height: auto; overflow: visible; clip: auto; font: 700 14px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; }
  .sch-ask { margin-top: 0; }
}
.rt td.is-ask span { font: 700 16px/1.3 var(--font-text); }
.exp-mga { padding: var(--space-6) 0 var(--space-4); }
.exp-mga h2 { margin: 0 0 var(--space-3); }
.mga-ways { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.mga-ways li { padding: var(--space-4); background: var(--surface-raised); border-top: 6px solid var(--mar); }
.mga-ways h3 { margin: 0 0 var(--space-2); }
.mga-ways p { margin: 0; max-width: 34rem; }
@media (min-width: 900px) { .mga-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mga-prices { margin: var(--space-3) 0 var(--space-4); font-size: 16px; color: var(--ink-muted); }
.mga-north { margin: var(--space-4) 0 0; max-width: 46rem; }
.mga-north a { font-weight: 700; text-underline-offset: 4px; text-decoration-color: var(--sol); text-decoration-thickness: 2px; }