/* San Blas Adventures — Sailing vs Speedboat (build v4) */
:root {
  --navy: #0B3C5D; --navy2: #0E4D6B; --teal: #1B7FA8; --teal2: #2AA9C7;
  --aqua: #CFF0F4; --gold: #F5B301; --gold2: #FFC107; --orange: #F08A24;
  --white: #FFFFFF; --gray: #F4F7F9; --ink: #0B2B3C; --muted: #5A6B75;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Open Sans', system-ui, sans-serif; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; line-height: 1.6; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--orange); }
footer a { color: #fff; }
img { max-width: 100%; display: block; }
details summary::-webkit-details-marker { display: none; }
.has-dd:hover .dd { display: block; }
.route-track { scrollbar-width: none; -ms-overflow-style: none; }
.route-track::-webkit-scrollbar { display: none; }
.dot { transition: width .25s, background .25s; }

/* ---------- layout ---------- */
.site-header {
  position:sticky;
  top:0;
  z-index:100;
}
.promo-bar {
  background:var(--gold);
  position:relative;
}
.promo-bar-inner {
  max-width:1600px;
  margin:0 auto;
  padding:9px 48px;
  position:relative;
  min-height:22px;
  display:grid;
  place-items:center;
}
.promo-prev-btn {
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  color:var(--navy);
  display:grid;
  place-items:center;
  padding:2px;
}
.promo-slide-1 {
  display:block;
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:14px;
  color:var(--ink);
}
.promo-highlight {
  color:var(--orange);
}
.promo-slide-2 {
  display:none;
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:14px;
  color:var(--ink);
}
.promo-next-btn {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  color:var(--navy);
  display:grid;
  place-items:center;
  padding:2px;
}
.nav-bar {
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 12%,var(--teal) 62%,var(--teal2) 100%);
  box-shadow:0 2px 14px rgba(0,0,0,.18);
  position:relative;
  z-index:110;
}
.nav-bar-inner {
  max-width:1400px;
  margin:0 auto;
  padding:8px 22px;
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  justify-content:space-between;
}
.logo-link {
  display:block;
  flex:0 0 auto;
  width:112px;
  height:64px;
}
.logo-img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.nav-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  align-items:center;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  flex:1 1 auto;
  justify-content:center;
}
.nav-link {
  color:#fff;
}
.nav-dropdown {
  position:relative;
}
.nav-link-toggle {
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:10px 0;
  transition:color .15s;
}
.nav-link-toggle:hover {
  color:var(--gold);
}
.dropdown-menu {
  position:absolute;
  top:100%;
  left:0;
  min-width:290px;
  background:#fff;
  box-shadow:0 10px 26px rgba(11,43,60,.28);
  overflow:hidden;
  display:none;
  z-index:200;
}
.dropdown-link {
  display:block;
  padding:13px 20px;
  color:#1A1A1A;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.3;
  border-bottom:1px solid #E6EEF3;
  background:#fff;
  transition:background .15s,color .15s;
}
.dropdown-link:hover {
  background:#29A8DE;
  color:#fff;
}
.dropdown-menu-wide {
  position:absolute;
  top:100%;
  right:0;
  min-width:290px;
  background:#fff;
  box-shadow:0 10px 26px rgba(11,43,60,.28);
  overflow:hidden;
  display:none;
  z-index:200;
}
.burger-btn {
  display:none;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  padding:8px;
  margin-left:auto;
}
.btn-book-header {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  align-items:center;
  gap:8px;
  background:var(--orange);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:14px;
  padding:12px 26px;
  border-radius:26px;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.mobile-panel {
  display:none;
  background:var(--navy);
  max-height:70vh;
  overflow-y:auto;
}
.mobile-link {
  display:block;
  padding:12px 20px;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.mobile-sublink {
  display:block;
  padding:12px 32px;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.mobile-book-wrap {
  padding:16px 20px;
}
.btn-book-mobile {
  display:block;
  text-align:center;
  background:var(--orange);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:14px;
  padding:14px;
  border-radius:26px;
}
.hero {
  position:relative;
  overflow:hidden;
  background:var(--navy);
}
.bg-media {
  position:absolute;
  inset:0;
}
.hero-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(95deg,rgba(11,60,93,.94) 0%,rgba(11,60,93,.82) 42%,rgba(11,60,93,.32) 72%,rgba(11,60,93,.08) 100%);
  pointer-events:none;
}
.hero-inner {
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:clamp(48px,7vw,92px) 22px;
  color:#fff;
}
.hero-copy {
  max-width:600px;
  pointer-events:none;
}
.hero-title {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:.005em;
  font-size:clamp(34px,5.6vw,58px);
  margin:0;
  text-shadow:0 3px 20px rgba(0,0,0,.35);
}
.accent-gold {
  color:var(--gold);
}
.hero-subtitle {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(16px,2.1vw,22px);
  color:#fff;
  margin:16px 0 0;
  line-height:1.2;
}
.hero-text {
  font-size:clamp(14px,1.6vw,16px);
  margin:18px 0 0;
  color:#EAF6FA;
  max-width:520px;
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
  pointer-events:auto;
}
.btn-gold {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--gold2);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:14px;
  padding:14px 24px;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.btn-teal {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--teal2);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:14px;
  padding:14px 24px;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.btn-outline {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:2px solid #fff;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:14px;
  padding:12px 22px;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.trust-bar {
  background:linear-gradient(100deg,var(--teal),var(--navy2));
  color:#fff;
}
.trust-bar-inner {
  max-width:1240px;
  margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:16px;
}
.icon-row {
  display:flex;
  align-items:center;
  gap:10px;
}
.icon-teal {
  color:var(--gold);
  flex:none;
}
.badge-label {
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.2;
}
.band-gray {
  background:var(--gray);
}
.section-inner {
  max-width:1200px;
  margin:0 auto;
  padding:clamp(48px,6vw,80px) 22px;
}
.qa-heading {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  text-align:center;
  color:var(--navy);
  font-size:clamp(24px,3.4vw,38px);
  margin:0;
  line-height:1.06;
}
.qa-lead {
  max-width:640px;
  margin:14px auto 0;
  text-align:center;
  color:var(--muted);
  font-size:16px;
}
.qa-split {
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  align-items:stretch;
  margin-top:36px;
}
.qa-card-sailing {
  flex:1 1 460px;
  min-width:0;
  display:flex;
  flex-direction:row;
  gap:0;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(11,43,60,.12);
}
.qa-card-media {
  flex:1 1 240px;
  min-width:0;
  min-height:240px;
  position:relative;
  overflow:hidden;
}
.img-cover {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.qa-card-body {
  flex:1 1 300px;
  min-width:0;
  padding:26px;
}
.qa-card-title {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:var(--navy);
  font-size:20px;
  margin:0;
}
.qa-card-tagline {
  font-style:italic;
  color:var(--teal);
  font-weight:600;
  margin:6px 0 16px;
  font-size:14px;
}
.qa-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:11px;
  font-size:14.5px;
}
.qa-list-item {
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--ink);
}
.icon-muted {
  color:var(--teal);
  flex:none;
}
.qa-vs {
  align-self:center;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--teal2);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:22px;
  box-shadow:0 8px 20px rgba(27,127,168,.4);
  border:4px solid #fff;
  z-index:3;
  margin:-8px 0;
}
.qa-card-sba {
  flex:1 1 460px;
  min-width:0;
  display:flex;
  flex-direction:row;
  gap:0;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(245,179,1,.2);
  border:2px solid var(--gold);
}
.qa-card-title-sba {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:var(--gold);
  font-size:20px;
  margin:0;
}
.img-fill {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.band-white {
  background:#fff;
}
.section-wide {
  max-width:1240px;
  margin:0 auto;
  padding:clamp(46px,6vw,78px) 22px;
}
.diff-split {
  display:flex;
  flex-wrap:wrap;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(11,43,60,.16);
  background:var(--navy2);
}
.diff-copy {
  flex:1 1 320px;
  padding:clamp(26px,3vw,42px);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.diff-title {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(21px,2.5vw,29px);
  margin:0;
  line-height:1.08;
}
.diff-p1 {
  color:#C9DEE8;
  font-size:14px;
  margin-top:16px;
}
.diff-p2 {
  color:#C9DEE8;
  font-size:14px;
}
.diff-p3 {
  color:var(--teal2);
  font-style:italic;
  font-weight:600;
  font-size:15px;
  margin-top:14px;
  line-height:1.45;
}
.btn-trips {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  background:var(--gold);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
  padding:12px 20px;
  border-radius:8px;
}
.diff-media {
  flex:2 1 460px;
  position:relative;
  min-height:clamp(300px,58vw,420px);
}
.diff-media-island {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:50%;
  overflow:hidden;
}
.diff-media-divider {
  position:absolute;
  inset:0;
  background:#fff;
  clip-path:polygon(0 0, 51.2% 0, 50.5% 6%, 51.7% 12%, 50.6% 19%, 51.8% 26%, 50.7% 33%, 51.6% 41%, 50.8% 49%, 51.9% 57%, 50.7% 65%, 51.6% 73%, 50.8% 81%, 51.8% 88%, 50.9% 94%, 51.3% 100%, 0 100%);
}
.diff-media-boat {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:50.4%;
  overflow:hidden;
  clip-path:polygon(0 0, 99.2% 0, 98% 6%, 100% 12%, 98.2% 19%, 100% 26%, 98.4% 33%, 99.8% 41%, 98.4% 49%, 100% 57%, 98.2% 65%, 99.8% 73%, 98.4% 81%, 100% 88%, 98.6% 94%, 99.4% 100%, 0 100%);
}
.diff-label-sailing {
  position:absolute;
  left:14px;
  bottom:14px;
  max-width:44%;
  z-index:4;
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
  line-height:1.15;
  pointer-events:none;
}
.diff-label-title {
  font-size:17px;
}
.diff-label-sub-sailing {
  font-size:12px;
  color:#DCEFF4;
}
.diff-label-sba {
  position:absolute;
  right:14px;
  bottom:14px;
  max-width:44%;
  z-index:4;
  text-align:right;
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
  line-height:1.15;
  pointer-events:none;
}
.diff-label-sub-sba {
  font-size:12px;
  color:var(--gold);
}
.compare-inner {
  max-width:1240px;
  margin:0 auto;
  padding:clamp(48px,6vw,80px) 22px;
}
.section-heading {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  text-align:center;
  color:var(--navy);
  font-size:clamp(23px,3.2vw,34px);
  margin:0 0 34px;
  line-height:1.08;
}
.compare-layout {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  align-items:flex-start;
}
.compare-table-wrap {
  flex:3 1 520px;
  min-width:0;
  overflow-x:auto;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(11,43,60,.12);
  border:1px solid #E4EDF1;
}
.compare-table {
  width:100%;
  border-collapse:collapse;
  min-width:480px;
  font-size:14.5px;
}
.compare-caption {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}
.th-feature {
  text-align:left;
  padding:14px 16px;
  background:var(--navy);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:12px;
}
.th-sailing {
  text-align:left;
  padding:14px 16px;
  background:var(--navy2);
  color:#CFEAF3;
  font-family:'Montserrat',sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:12px;
}
.th-sba {
  text-align:left;
  padding:14px 16px;
  background:var(--gold);
  color:var(--navy);
  font-family:'Montserrat',sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:12px;
}
.row-label {
  text-align:left;
  padding:12px 16px;
  font-weight:700;
  color:var(--navy);
}
.row-label-inner {
  display:flex;
  gap:9px;
  align-items:center;
}
.cell-sailing {
  padding:12px 16px;
  color:var(--muted);
}
.cell-sba {
  padding:12px 16px;
  color:var(--ink);
  font-weight:600;
  background:rgba(245,179,1,.1);
}
.compare-aside {
  flex:1 1 280px;
  min-width:0;
}
.aside-media {
  position:relative;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:16/10;
  box-shadow:0 12px 30px rgba(11,43,60,.14);
}
.aside-text {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:var(--navy);
  font-size:15px;
  line-height:1.3;
  margin:18px 0 12px;
}
.aside-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:14px;
}
.aside-list-item {
  display:flex;
  gap:9px;
  align-items:center;
  color:var(--ink);
}
.icon-gold {
  color:var(--orange);
  flex:none;
}
.cta-row {
  text-align:center;
  margin-top:34px;
}
.btn-availability {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--gold);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:14px;
  padding:15px 30px;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(11,43,60,.18);
}
.route-heading {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  text-align:center;
  color:var(--navy);
  font-size:clamp(23px,3.2vw,34px);
  margin:0 0 38px;
  line-height:1.08;
}
.route-track-inner {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  justify-content:center;
  overflow-x:visible;
  scroll-snap-type:none;
  scroll-padding:22px;
  margin:0 -22px;
  padding:0 22px 6px;
}
.route-card-box {
  flex:1 1 190px;
  min-width:180px;
  scroll-snap-align:center;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(11,43,60,.1);
  display:flex;
  flex-direction:column;
}
.route-card-media {
  position:relative;
  aspect-ratio:4/3;
}
.route-day-badge {
  position:absolute;
  top:12px;
  left:12px;
  background:var(--teal);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:6px;
}
.route-card-body {
  padding:16px;
  flex:1;
}
.route-card-title {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:var(--navy);
  font-size:15px;
  margin:0 0 10px;
  line-height:1.15;
}
.route-card-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  color:var(--muted);
}
.route-card-list-item {
  display:flex;
  gap:7px;
  align-items:flex-start;
}
.icon-check {
  color:var(--gold);
  flex:none;
  margin-top:2px;
}
.route-arrow-box {
  display:grid;
  align-self:center;
  color:var(--teal2);
  flex:none;
}
.route-dots-row {
  display:none;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin-top:16px;
}
.route-prev-btn {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-right:6px;
  border-radius:50%;
  border:none;
  padding:0;
  cursor:pointer;
  background:var(--navy);
  color:#fff;
}
.route-dot-active {
  width:26px;
  height:9px;
  border-radius:999px;
  border:none;
  padding:0;
  cursor:pointer;
  background:var(--teal);
  transition:all .25s;
}
.route-dot {
  width:9px;
  height:9px;
  border-radius:999px;
  border:none;
  padding:0;
  cursor:pointer;
  background:#C3D6DF;
  transition:all .25s;
}
.route-next-btn {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-left:6px;
  border-radius:50%;
  border:none;
  padding:0;
  cursor:pointer;
  background:var(--navy);
  color:#fff;
}
.btn-itinerary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--teal);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:14px;
  padding:14px 30px;
  border-radius:999px;
}
.why-heading {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  text-align:center;
  color:var(--navy);
  font-size:clamp(23px,3.2vw,34px);
  margin:0 0 8px;
  line-height:1.08;
}
.why-lead {
  text-align:center;
  color:var(--muted);
  font-size:15px;
  margin:0 0 36px;
}
.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
}
.why-card {
  display:flex;
  flex-direction:column;
}
.why-icon {
  color:var(--teal);
}
.why-card-title {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:var(--navy);
  font-size:14px;
  margin:12px 0 6px;
  line-height:1.2;
}
.why-card-text {
  color:var(--muted);
  font-size:13.5px;
  margin:0 0 14px;
  flex:1;
}
.why-card-media {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:4/3;
}
.reviews {
  background:var(--aqua);
}
.reviews-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.review {
  margin:0;
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 12px 28px rgba(11,43,60,.1);
}
.review-stars {
  color:var(--gold);
  font-size:16px;
  letter-spacing:2px;
}
.review-text {
  color:var(--ink);
  font-size:14.5px;
  margin:12px 0 16px;
}
.review-author {
  font-weight:700;
  color:var(--navy);
  font-family:'Montserrat',sans-serif;
  font-size:14px;
}
.reviews-cta {
  text-align:center;
  margin-top:32px;
}
.btn-reviews {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--teal);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:14px;
  padding:14px 28px;
  border-radius:999px;
}
.faq-inner {
  max-width:860px;
  margin:0 auto;
  padding:clamp(48px,6vw,80px) 22px;
}
.faq-heading {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  text-align:center;
  color:var(--navy);
  font-size:clamp(23px,3.2vw,34px);
  margin:0 0 32px;
  line-height:1.08;
}
.faq-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item {
  background:var(--gray);
  border-radius:14px;
  border:1px solid #E4EDF1;
  padding:0 20px;
}
.faq-summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:18px 0;
}
.faq-question {
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  color:var(--navy);
  font-size:16px;
}
.faq-plus {
  color:var(--gold);
  font-size:24px;
  font-weight:800;
  line-height:1;
  flex:none;
}
.faq-answer {
  color:var(--muted);
  font-size:15px;
  margin:0 0 18px;
}
.faq-note {
  text-align:center;
  margin-top:24px;
  color:var(--muted);
  font-size:15px;
}
.cta-final {
  position:relative;
  overflow:hidden;
  background:var(--navy);
  color:#fff;
}
.cta-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(11,60,93,.92) 0%,rgba(11,43,60,.8) 55%,rgba(11,43,60,.55) 100%);
  pointer-events:none;
}
.cta-inner {
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:clamp(48px,6vw,80px) 22px;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
  justify-content:space-between;
}
.cta-copy {
  max-width:560px;
  pointer-events:none;
}
.cta-title {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(24px,3.6vw,40px);
  margin:0;
  line-height:1.05;
  text-shadow:0 3px 16px rgba(0,0,0,.35);
}
.cta-text {
  font-size:clamp(14px,1.7vw,16px);
  color:#EAF6FA;
  margin:14px 0 0;
}
.cta-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  pointer-events:auto;
}
.btn-gold-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--gold2);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:14px;
  padding:14px 26px;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.btn-teal-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--teal2);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:14px;
  padding:14px 26px;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.btn-outline-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:2px solid #fff;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:14px;
  padding:12px 24px;
  border-radius:10px;
}
.site-footer {
  background:#0C5A93;
  color:#D6E6F2;
}
.footer-inner {
  max-width:1240px;
  margin:0 auto;
  padding:52px 26px 30px;
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1.2fr;
  gap:34px;
  overflow-wrap:anywhere;
}
.footer-logo {
  width:150px;
  height:150px;
}
.footer-col {
  font-size:15px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-col-title {
  color:#fff;
  font-family:'Montserrat',sans-serif;
  text-transform:uppercase;
  font-size:16px;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.footer-col-contact {
  font-size:15px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.footer-address {
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.footer-copy {
  padding:16px 22px 26px;
  text-align:center;
  font-size:14px;
  color:#C3D8E8;
}
.whatsapp-btn {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:grid;
  place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.whatsapp-btn:hover {
  transform:scale(1.06);
  box-shadow:0 10px 26px rgba(0,0,0,.34);
}

/* ---------- interactive states (override layout classes) ---------- */
.promo-slide { display: none; }
.promo-slide.is-active { display: block; }
.mobile-menu { display: none; }
.mobile-menu.is-open { display: block; }
.dot { width: 9px; background: #C3D6DF; }
.dot.is-active { width: 26px; background: var(--teal); }

/* ---------- tablet ---------- */
@media (max-width: 1079px) {
  .nav-main { display: none; }
  .nav-burger { display: grid; }
  .nav-book { display: none; }
  .mobile-menu.is-open { display: block; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- mobile ---------- */
@media (max-width: 759px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .qa-card:first-of-type { flex-direction: column-reverse; }
  .qa-card:last-of-type { flex-direction: column; }
  .route-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 22px;
    margin: 0 -22px;
    padding: 0 22px 6px;
  }
  .route-card { flex: 0 0 84%; min-width: 0; }
  .route-arrow { display: none; }
  .route-dots { display: flex; }
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1.3s cubic-bezier(.22,.61,.36,1), transform 1.3s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--rd,0ms);
  will-change:opacity,transform;
}
.reveal.is-in {
  opacity:1;
  transform:none;
}
.reveal-img {
  opacity:0;
  transition:opacity 1.5s ease;
}
.reveal-img.is-loaded {
  opacity:1;
}
@media (prefers-reduced-motion:reduce) {
  .reveal, .reveal-img { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- hero entrance ---------- */
@keyframes heroRise {
  from { opacity:0; transform:translateY(28px); }
  to { opacity:1; transform:none; }
}
@keyframes heroFade {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes heroZoom {
  from { transform:scale(1.12); }
  to { transform:scale(1); }
}
.hero-image {
  animation:heroZoom 16s cubic-bezier(.16,.72,.24,1) both, heroFade 2s ease both;
}
.hero-overlay {
  animation:heroFade 2.2s ease .15s both;
}
.hero-title {
  animation:heroRise 1.5s cubic-bezier(.22,.61,.36,1) .25s both;
}
.hero-subtitle {
  animation:heroRise 1.5s cubic-bezier(.22,.61,.36,1) .5s both;
}
.hero-text {
  animation:heroRise 1.5s cubic-bezier(.22,.61,.36,1) .75s both;
}
.hero-actions {
  animation:heroRise 1.5s cubic-bezier(.22,.61,.36,1) 1s both;
}
@media (prefers-reduced-motion:reduce) {
  .hero-image, .hero-overlay, .hero-title, .hero-subtitle, .hero-text, .hero-actions {
    animation:none !important;
  }
}

/* image blocks: fade only, no upward slide */
.diff-media.reveal,
.qa-card-media.reveal,
.qa-card-sba.reveal {
  transform:none;
}

/* ---------- button hover ---------- */
.btn-gold, .btn-teal, .btn-outline,
.btn-trips,
.btn-gold-cta, .btn-teal-cta, .btn-outline-cta,
.btn-book-header, .btn-book-mobile,
.btn-reviews {
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, filter .22s ease;
}
.btn-gold:hover, .btn-teal:hover, .btn-outline:hover,
.btn-trips:hover,
.btn-gold-cta:hover, .btn-teal-cta:hover, .btn-outline-cta:hover,
.btn-book-header:hover, .btn-book-mobile:hover,
.btn-reviews:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.28);
  filter:brightness(1.06);
}
.btn-gold:active, .btn-teal:active, .btn-outline:active,
.btn-trips:active,
.btn-gold-cta:active, .btn-teal-cta:active, .btn-outline-cta:active,
.btn-book-header:active, .btn-book-mobile:active,
.btn-reviews:active {
  transform:translateY(-1px) scale(.985);
}
.btn-gold svg, .btn-teal svg, .btn-outline svg,
.btn-trips svg,
.btn-gold-cta svg, .btn-teal-cta svg, .btn-outline-cta svg,
.btn-book-header svg {
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.btn-gold:hover svg, .btn-teal:hover svg, .btn-outline:hover svg,
.btn-trips:hover svg,
.btn-gold-cta:hover svg, .btn-teal-cta:hover svg, .btn-outline-cta:hover svg,
.btn-book-header:hover svg {
  transform:translateX(2px) scale(1.08);
}
@media (prefers-reduced-motion:reduce) {
  .btn-gold, .btn-teal, .btn-outline, .btn-trips,
  .btn-gold-cta, .btn-teal-cta, .btn-outline-cta,
  .btn-book-header, .btn-book-mobile, .btn-reviews {
    transition:none;
  }
  .btn-gold:hover, .btn-teal:hover, .btn-outline:hover, .btn-trips:hover,
  .btn-gold-cta:hover, .btn-teal-cta:hover, .btn-outline-cta:hover,
  .btn-book-header:hover, .btn-book-mobile:hover, .btn-reviews:hover {
    transform:none;
  }
}

/* hover text colors by button color */
.btn-gold, .btn-teal, .btn-outline, .btn-trips,
.btn-gold-cta, .btn-teal-cta, .btn-outline-cta,
.btn-book-header, .btn-book-mobile, .btn-reviews {
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, filter .22s ease, color .2s ease, background .2s ease;
}
/* orange -> blue text */
.btn-book-header:hover, .btn-book-mobile:hover {
  color:var(--navy);
}
/* light blue -> orange text */
.btn-teal:hover, .btn-teal-cta:hover, .btn-reviews:hover {
  color:var(--orange);
}
/* yellow -> white text */
.btn-gold:hover, .btn-gold-cta:hover, .btn-trips:hover {
  color:#fff;
}
/* outlined -> fill white, navy text */
.btn-outline:hover, .btn-outline-cta:hover {
  background:#fff;
  color:var(--navy);
}


/* ============ San Blas Travel Guide ============ */
.guide-hero {
  position:relative;
  overflow:hidden;
  background:var(--navy);
}
.guide-hero-in {
  max-width:640px;
  position:relative;
}
.guide-stats {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:26px 0 0;
  animation:heroRise 1.5s cubic-bezier(.22,.61,.36,1) 1s both;
}
.guide-stat {
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  padding:12px 18px;
  display:flex;
  flex-direction:column;
  gap:2px;
  backdrop-filter:blur(2px);
}
.guide-stat strong {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:24px;
  line-height:1;
  color:var(--gold);
}
.guide-stat span {
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#EAF6FA;
}
.guide-bar {
  position:sticky;
  top:0;
  z-index:40;
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.guide-bar-in {
  max-width:1240px;
  margin:0 auto;
  padding:10px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.guide-bar-t {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.guide-bar-t:hover { color:var(--gold); }
.guide-jump {
  display:flex;
  align-items:center;
  gap:10px;
}
.guide-jump > span {
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#BEDCE6;
}
.guide-select {
  font-family:'Open Sans',sans-serif;
  font-size:13px;
  color:var(--navy);
  background:#fff;
  border:1px solid #D5E4EA;
  border-radius:9px;
  padding:7px 10px;
  max-width:min(60vw,320px);
}
.guide-index {
  background:var(--gray);
  border-bottom:1px solid #E4EDF1;
}
.guide-index-in {
  max-width:1240px;
  margin:0 auto;
  padding:clamp(40px,5vw,66px) 22px;
}
.guide-h2 {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  text-align:center;
  color:var(--navy);
  font-size:clamp(23px,3.2vw,34px);
  margin:0 0 10px;
  line-height:1.08;
}
.guide-sub {
  text-align:center;
  color:var(--muted);
  font-size:15px;
  margin:0 auto 30px;
  max-width:620px;
}
.guide-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
}
.guide-card {
  background:#fff;
  border:1px solid #E4EDF1;
  border-radius:14px;
  padding:16px 16px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.guide-card:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(11,60,93,.13);
  border-color:var(--teal2);
}
.guide-card-n {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:13px;
  color:var(--gold);
  letter-spacing:.06em;
}
.guide-card-t {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:var(--navy);
  font-size:14px;
  line-height:1.25;
  text-wrap:pretty;
}
.guide-card-c {
  color:var(--muted);
  font-size:12px;
}
.guide-topic {
  background:#fff;
  border-bottom:1px solid #EDF3F6;
  scroll-margin-top:64px;
}
.guide-topic:nth-of-type(even) { background:#FBFDFE; }
.guide-topic-in {
  max-width:900px;
  margin:0 auto;
  padding:clamp(36px,4.4vw,58px) 22px;
}
.guide-topic-head {
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0 0 22px;
  padding-bottom:14px;
  border-bottom:2px solid var(--aqua);
}
.guide-topic-n {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:clamp(26px,3.4vw,38px);
  line-height:1;
  color:var(--aqua);
  flex:none;
}
.guide-topic-t {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:var(--navy);
  font-size:clamp(19px,2.5vw,27px);
  line-height:1.1;
  margin:0;
  text-wrap:pretty;
}
.guide-acc {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.guide-item {
  background:var(--gray);
  border:1px solid #E4EDF1;
  border-radius:14px;
  padding:0 20px;
}
.guide-item {
  transition:background .3s ease, border-color .3s ease;
}
.guide-item[open] {
  background:#fff;
  border-color:var(--teal2);
}
.guide-sum {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:16px 0;
}
.guide-q {
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  color:var(--navy);
  font-size:16px;
  line-height:1.3;
  text-wrap:pretty;
}
.guide-plus {
  color:var(--gold);
  font-size:24px;
  font-weight:800;
  line-height:1;
  flex:none;
  transition:transform .25s ease;
}
.guide-item[open] .guide-plus { transform:rotate(45deg); }
.guide-body {
  padding:0 0 8px;
  overflow:hidden;
}
.guide-a {
  color:var(--muted);
  font-size:15px;
  margin:0 0 14px;
  text-wrap:pretty;
}
.guide-list {
  color:var(--muted);
  font-size:15px;
  margin:0 0 14px;
  padding-left:20px;
}
.guide-list li { margin:0 0 5px; }
.guide-topfoot {
  margin-top:18px;
  text-align:right;
}
.guide-topfoot a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--teal);
}
.guide-topfoot a:hover { color:var(--orange); }
@media (max-width: 759px) {
  .guide-bar-in { padding:8px 16px; }
  .guide-jump { flex:1; }
  .guide-jump > span { display:none; }
  .guide-select { max-width:none; width:100%; }
  .guide-bar-t { display:none; }
  .guide-index { display:none; }
  .guide-topfoot { display:none; }
}