/* 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);
}
@media (max-width:759px) {
  .promo-slide-1, .promo-slide-2 { font-size:11.5px !important; line-height:1.35; }
  .promo-bar-inner { padding:7px 34px; min-height:auto; }
}
.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;
  position:fixed;
  inset:0;
  background:var(--navy);
  overflow-y:auto;
  padding:84px 26px 40px;
  z-index:300;
}
.mobile-close {
  position:absolute;
  top:22px;
  right:22px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  background:none;
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
}
.mobile-link {
  display:block;
  padding:18px 4px;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:17px;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.mnav-item {
  border-bottom:1px solid rgba(255,255,255,.16);
}
.mnav-sum {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 4px;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:17px;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
}
.mnav-sum::-webkit-details-marker {
  display:none;
}
.mnav-sum i {
  transition:transform .3s;
  flex:0 0 auto;
}
.mnav-item[open] .mnav-sum i {
  transform:rotate(180deg);
}
.mnav-body {
  overflow:hidden;
}
.mnav-sublink {
  display:block;
  padding:12px 4px 12px 14px;
  color:rgba(255,255,255,.82);
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.mobile-book-wrap {
  padding:28px 4px 0;
}
.mobile-brand {
  margin-top:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.mobile-brand-logo {
  width:120px;
  height:auto;
}
.mobile-social {
  display:flex;
  gap:16px;
}
.mobile-social a {
  width:38px;
  height:38px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  display:grid;
  place-items:center;
  color:#fff;
}
.mobile-social svg {
  width:18px;
  height:18px;
}
.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;
}
.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(0,0,0,.5) 0%,rgba(0,0,0,.36) 42%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.04) 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;
}
.highlights-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.highlight-media {
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:16px;
  box-shadow:0 8px 20px rgba(11,43,60,.12);
}
.highlight-title {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:16px;
  color:var(--navy);
  text-align:center;
  line-height:1.3;
}
@media (max-width:900px) {
  .highlights-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px) {
  .highlights-grid { grid-template-columns:1fr; }
}
.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 (el menu completo entra a partir de 1200px) ---------- */
@media (max-width: 1199px) {
  .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; }
}

/* ---------- Contact ---------- */
.contact-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:800px; margin:0 auto; }
@media (max-width:759px) { .contact-cards { grid-template-columns:1fr; } }
.contact-card {
  background:var(--gray); border:1px solid #E4EDF1; border-radius:16px; padding:28px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.contact-card:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(11,60,93,.13); }
.contact-card-icon { color:var(--teal); }
.contact-card-title { font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; color:var(--navy); font-size:16px; margin:4px 0 0; }
.contact-card-text { color:var(--muted); font-size:14.5px; margin:0; }
.contact-form { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.contact-input {
  font-family:'Open Sans',sans-serif; font-size:15px; color:var(--ink);
  border:1px solid #D5E4EA; border-radius:10px; padding:13px 16px; background:#fff;
}
.contact-textarea { resize:vertical; }
.contact-split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; padding-top:56px; padding-bottom:56px; }
@media (max-width:759px) { .contact-split { grid-template-columns:1fr; gap:36px; } }
.contact-brand { font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase; color:var(--navy); font-size:26px; margin:0 0 14px; }
.contact-question { font-family:'Montserrat',sans-serif; font-weight:800; color:var(--ink); font-size:19px; margin:0 0 14px; }
.contact-lead { color:var(--muted); font-size:15px; margin:0 0 18px; }
.contact-tagline { font-family:'Montserrat',sans-serif; font-weight:800; color:var(--ink); font-size:15px; margin:0 0 28px; }
.contact-rows { display:flex; flex-direction:column; gap:20px; }
.contact-row { display:flex; align-items:center; gap:14px; }
.contact-row-icon {
  width:44px; height:44px; border-radius:10px; background:var(--navy); color:#fff;
  display:grid; place-items:center; flex:none;
}
.contact-row-title { display:block; color:var(--ink); font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; }
.contact-row-text { display:block; color:var(--muted); font-size:14.5px; }
.contact-form-heading { font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase; color:var(--navy); font-size:26px; margin:0 0 20px; }
.contact-input { border:none; border-bottom:1px solid #C7D3D9; border-radius:0; padding:8px 2px; background:transparent; }
.contact-input:focus { outline:none; border-bottom-color:var(--teal); }
.contact-robot {
  display:inline-flex; align-items:center; gap:10px; border:1px solid #D5E4EA; border-radius:6px;
  padding:12px 16px; width:max-content; color:var(--ink); font-size:14.5px;
}
.btn-send {
  align-self:flex-start; background:var(--navy); color:#fff; font-family:'Montserrat',sans-serif;
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:13px;
  padding:13px 30px; border:none; border-radius:6px; cursor:pointer;
}
.btn-send:hover { background:var(--navy2); }

.rt-list-check {
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px;
  max-width:900px;
}
.rt-list-item {
  display:flex; gap:12px; align-items:flex-start; color:var(--ink); font-size:15px; line-height:1.55;
}
.rt-list-item i { color:var(--gold); flex:none; margin-top:3px; }
.narrow-copy { max-width:760px; }
.gallery-row-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.gallery-row-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px; }
@media (max-width:759px) {
  .gallery-row-3 { grid-template-columns:1fr; }
  .gallery-row-2 { grid-template-columns:1fr; }
}
.rt-two-col { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; max-width:1000px; margin:0 auto; }
@media (max-width:759px) { .rt-two-col { grid-template-columns:1fr; } }
.rt-col-title {
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  color:var(--navy); font-size:16px; margin:0 0 16px; line-height:1.25;
}
.rt-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; color:var(--muted); font-size:14.5px; }
.rt-list li strong { color:var(--ink); }
.rt-grid-7 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; max-width:1200px; margin:0 auto; }
.rt-point {
  background:var(--gray); border:1px solid #E4EDF1; border-radius:14px; padding:18px 20px;
  color:var(--muted); font-size:14.5px;
}
.rt-point strong { color:var(--navy); font-family:'Montserrat',sans-serif; font-weight:700; }

/* ---------- included/not-included tabs ---------- */
.inc-tab-switch { display:flex; gap:8px; justify-content:center; margin:0 0 28px; }
.inc-tab-btn {
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:13px; padding:12px 26px; border-radius:999px; border:2px solid var(--navy); background:#fff;
  color:var(--navy); cursor:pointer; transition:background .2s ease, color .2s ease;
}
.inc-tab-btn:hover { background:var(--navy2); color:#fff; }
.inc-tab-btn.is-active { background:var(--navy); color:#fff; }
.inc-tab-panel .rt-list-check { max-width:640px; margin:0 auto; }
.inc-tab-panel[data-inc-tab="not-included"] .rt-list-item i { color:var(--muted); }

/* ---------- two-column trip layout ---------- */
.tp-layout { display:grid; grid-template-columns:1fr 340px; gap:48px; }
.tp-main { min-width:0; }
.tp-block + .tp-block { margin-top:60px; padding-top:60px; border-top:1px solid #E4EDF1; }
.tp-side { min-width:0; }
.tp-calendar-card {
  position:sticky; top:112px; background:var(--gray); border:1px solid #E4EDF1; border-radius:16px;
  padding:26px; box-shadow:0 10px 26px rgba(11,43,60,.08);
}
.tp-calendar-heading { font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase; color:var(--navy); font-size:19px; margin:0 0 8px; line-height:1.15; }
.tp-calendar-lead { color:var(--muted); font-size:14px; margin:0 0 18px; }
.tp-calendar-placeholder {
  border:2px dashed #C3D6DF; border-radius:12px; padding:44px 16px; background:#fff; text-align:center;
  color:var(--muted); font-family:'Montserrat',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:13px;
}
@media (max-width:759px) {
  .tp-layout { grid-template-columns:1fr; }
  .tp-calendar-card { position:static; }
  .tp-side { display:none; }
}
.mobile-trip-strip { display:none; }
@media (max-width:759px) {
  .mobile-trip-strip {
    display:flex; gap:2px; padding:14px 6px; overflow-x:auto; position:sticky; top:106px; z-index:90;
    border-top:3px solid var(--navy2); border-bottom:3px solid var(--navy2); background:#fff;
  }
  .mobile-trip-strip a {
    display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:66px; text-decoration:none;
  }
  .mobile-trip-strip a i { color:var(--ink); }
  .mobile-trip-strip a span {
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; color:var(--ink); text-align:center; line-height:1.2;
  }
  .mobile-trip-strip a.is-active i, .mobile-trip-strip a.is-active span { color:var(--teal2); }
}

/* ---------- day itinerary accordion ---------- */
.day-list { display:flex; flex-direction:column; gap:14px; max-width:900px; margin:0 auto; }
.day-item { background:#fff; border-radius:16px; border:1px solid #E4EDF1; box-shadow:0 10px 26px rgba(11,43,60,.08); padding:0 24px; }
.day-sum { list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:22px 0; }
.day-sum::-webkit-details-marker { display:none; }
.day-num {
  flex:none; font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:var(--teal); padding:7px 14px; border-radius:8px;
}
.day-title { flex:1; margin:0; font-family:'Montserrat',sans-serif; font-weight:800; color:var(--navy); font-size:18px; line-height:1.25; }
.day-caret { flex:none; color:var(--gold); transition:transform .3s; }
.day-item[open] .day-caret { transform:rotate(180deg); }
.day-body { overflow:hidden; padding-bottom:26px; color:var(--muted); font-size:15px; line-height:1.5; }
.day-body p { margin:0 0 14px; }
@media (max-width:759px) {
  .day-item { padding:0 18px; }
  .day-sum { gap:12px; }
  .day-title { font-size:16px; }
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s 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);
}

/* El calendario aparece dos veces en el HTML: uno en el aside (.tp-side, solo
   desktop) y otro suelto para mobile. La clase .tp-calendar-mobile existia
   pero no tenia regla, asi que en desktop se veian los dos.
   Va al final del archivo para ganarle a cualquier regla previa. */
.tp-calendar-mobile { display: none; }
@media (max-width: 759px) {
  .tp-calendar-mobile { display: block; margin-top: 32px; }
}

/* ---------- Sidebar del calendario mas ancho ----------
   Se ensancha solo de 1101px para arriba: entre 760 y 1100 la columna de
   contenido quedaria demasiado angosta, y abajo de 760 el sidebar ni se ve. */
@media (min-width: 1101px) {
  .tp-layout { grid-template-columns: 1fr 420px; }
}

/* El calendario trae una media query propia que achica los nombres de dia,
   pero mira el ancho de la VENTANA, no el del sidebar: en desktop nunca se
   activaba y "Wednesday" a 11px no entraba en su columna. Como las columnas
   son 1fr (que no bajan de su contenido minimo), la grilla se desbordaba y se
   cortaba la ultima columna. min-width:0 las deja repartirse parejo. */
.tp-side .sba-calendar-container .day-header {
  min-width: 0;
  font-size: 9px;
  padding: 9px 2px;
  letter-spacing: -.01em;
}
.tp-side .sba-calendar-container .calendar-day { min-width: 0; }

/* ---------- Indice lateral "Explore the Trip" ----------
   Mismas propiedades que tenia el estilo inline, mas los estados. El JS marca
   con .is-current la seccion visible mientras se scrollea. */
.tp-toc-link {
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:13px;
  color:var(--muted);
  padding:6px 0;
  transition:color .18s ease;
}
.tp-toc-link:hover { color:var(--teal2); }
.tp-toc-link.is-current { color:var(--teal2); font-weight:700; }

/* ---- celulares angostos (320-360px): escala tipografica mas chica ---- */
@media (max-width:360px) {
  .hero-inner { padding-left:18px; padding-right:18px; }
  .hero-title { font-size:26px; }
  .hero-subtitle { font-size:14px; }
  .hero-text { font-size:13.5px; }
  .hero-actions { gap:8px; }
  .btn-gold, .btn-teal, .btn-outline { font-size:12.5px; padding:12px 14px; }
  .section-inner { padding-left:16px; padding-right:16px; }
  .section-heading { font-size:20px; margin-bottom:22px; }
  .cta-title { font-size:21px; }
  .cta-text { font-size:14px; }
  .btn-gold-cta, .btn-teal-cta, .btn-outline-cta { font-size:12.5px; padding:12px 14px; }
}

/* ---- Una sola columna: solo en la pagina principal de la ruta (.tp-onecol).
   Las subpaginas (general-information, guna-yala, etc.) siguen con su aside. ---- */
.tp-onecol { display:block; }
.tp-onecol .tp-main { max-width:none; }
.tp-onecol .tp-calendar-card { position:static; }
.tp-onecol .tp-calendar-block { max-width:760px; margin:0 auto 56px; }
.tp-onecol .tp-calendar-mobile { display:block; }
.tp-onecol .tp-calendar-block .sba-calendar-container .day-header { min-width:0; }

/* ---- Hero de la ruta: breadcrumb, features y tarjeta de precio ---- */
.hero-trip .hero-overlay { background:linear-gradient(95deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.38) 45%,rgba(0,0,0,.18) 75%,rgba(0,0,0,.1) 100%); }
.hero-trip { min-height:clamp(540px,72vh,760px); display:flex; align-items:center; }
.hero-trip-inner { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:40px; align-items:center; padding-top:clamp(56px,7vw,96px); padding-bottom:clamp(56px,7vw,96px); }
.hero-trip .hero-copy { max-width:none; pointer-events:auto; }
.hero-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:#DCEBF7; margin-bottom:18px; }
.hero-crumbs a { color:#fff; text-decoration:none; }
.hero-crumbs a:hover { color:var(--gold); }
.hero-crumbs span:last-child { color:var(--gold); font-weight:600; }
.hero-trip .hero-title { font-size:clamp(34px,5.4vw,64px); }
.hero-trip-days { letter-spacing:.14em; font-size:clamp(15px,1.8vw,20px); margin-top:14px; }
.hero-trip .hero-text { font-size:clamp(15px,1.5vw,18px); font-weight:600; max-width:640px; margin-top:10px; }
.hero-feats { list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:18px 30px; }
.hero-feat { display:flex; align-items:center; gap:10px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12.5px; line-height:1.25; color:#fff; }
.hero-feat svg { flex:none; color:var(--gold); }
.hero-book { background:#fff; color:var(--navy); border-radius:18px; padding:24px 24px 22px; box-shadow:0 18px 40px rgba(0,0,0,.28); display:flex; flex-direction:column; }
.hero-book-from { font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.hero-book-price { font-family:'Montserrat',sans-serif; font-weight:900; font-size:44px; line-height:1; margin:2px 0 16px; }
.hero-book-list { list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14.5px; }
.hero-book-list li { display:flex; align-items:center; gap:10px; }
.hero-book-list svg { flex:none; color:var(--teal); }
.hero-book-btn { justify-content:center; width:100%; gap:10px; }
@media (max-width:980px) {
  .hero-trip-inner { grid-template-columns:1fr; gap:28px; align-items:start; }
  .hero-book { max-width:420px; }
}
@media (max-width:640px) {
  .hero-trip-inner { padding-top:32px; padding-bottom:36px; }
  .hero-feats { gap:14px 18px; margin-top:22px; }
  .hero-feat { font-size:11.5px; gap:8px; }
  .hero-feat svg { width:22px; height:22px; }
  .hero-book { max-width:none; padding:20px 18px 18px; }
  .hero-book-price { font-size:38px; }
}
.hero-book-note { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:12px; font-size:13px; color:var(--muted); }
.hero-book-note svg { color:var(--teal); }

/* ---- CTA final: centrado, overlay mas claro, boton y tres perks ---- */
.cta-v2 .cta-overlay { background:linear-gradient(180deg,rgba(11,60,93,.38) 0%,rgba(11,60,93,.5) 100%); }
.cta-v2 .cta-inner { flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0; padding:clamp(64px,8vw,112px) 22px; }
.cta-v2 .cta-title { max-width:720px; font-size:clamp(26px,3.8vw,44px); text-shadow:0 3px 18px rgba(0,0,0,.35); }
.cta-v2 .cta-text { max-width:560px; font-size:clamp(15px,1.5vw,18px); line-height:1.55; margin:16px auto 0; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.cta-main-btn { margin:28px 0 40px; font-size:16px; padding:16px 34px; gap:10px; }
.cta-perks { list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:clamp(28px,5vw,64px); }
.cta-perk { display:flex; flex-direction:column; align-items:center; gap:10px; }
.cta-perk-link { display:flex; flex-direction:column; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.cta-perk-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#fff; color:var(--navy); box-shadow:0 8px 20px rgba(0,0,0,.2); transition:transform .25s cubic-bezier(.22,.61,.36,1); }
.cta-perk:hover .cta-perk-icon { transform:scale(1.1); }
.cta-perk-label { font-family:'Montserrat',sans-serif; font-weight:700; font-size:13.5px; line-height:1.3; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); }
@media (max-width:640px) {
  .cta-v2 .cta-inner { padding:56px 22px 60px; }
  .cta-main-btn { width:100%; justify-content:center; margin:24px 0 32px; }
  .cta-perks { gap:18px; width:100%; }
  .cta-perk { flex:1; }
  .cta-perk-icon { width:48px; height:48px; }
  .cta-perk-label { font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce) { .cta-perk-icon { transition:none; } .cta-perk:hover .cta-perk-icon { transform:none; } }

/* itinerario en tarjetas (mismo componente que Sailing vs Speedboat) */
.tp-route { margin:0 0 56px; }
.tp-route .route-heading { margin-bottom:34px; }

/* itinerario completo, plegado debajo de las tarjetas */
.tp-full { max-width:1000px; margin:0 auto 56px; }
.tp-full-sum { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px; border:1px solid #E4EDF1; border-radius:14px; background:var(--gray); font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:14px; color:var(--navy); transition:background .2s ease; }
.tp-full-sum::-webkit-details-marker { display:none; }
.tp-full-sum:hover { background:#E9F1F5; }
.tp-full-sum svg { flex:none; color:var(--teal); transition:transform .25s ease; }
.tp-full-details[open] .tp-full-sum svg { transform:rotate(180deg); }
.tp-full-body { padding-top:22px; }

/* ---- What's Included: iconos de colores, mismo estilo que Why choose de la home ---- */
.inc-block { max-width:1240px; margin:0 auto 56px; }
.inc-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:24px 18px; text-align:center; margin-bottom:30px; }
.inc-item { display:flex; flex-direction:column; align-items:center; }
.inc-icon { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; margin-bottom:14px; flex:none; box-shadow:0 8px 20px rgba(11,43,60,.10); transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }
.inc-icon svg { transition:transform .28s cubic-bezier(.22,.61,.36,1); }
.inc-item:hover .inc-icon { transform:scale(1.14); box-shadow:0 14px 30px rgba(11,43,60,.18); }
.inc-item:hover .inc-icon svg { transform:scale(1.12); }
.inc-c-blue   { background:#DCEEFF; color:#1B7FA8; }
.inc-c-yellow { background:#FFF1C2; color:#E8A400; }
.inc-c-green  { background:#DDF5E7; color:#1E9E5A; }
.inc-c-orange { background:#FFE5CF; color:#F08A24; }
.inc-c-red    { background:#FFDCE2; color:#E5394F; }
.inc-c-teal   { background:#D6F3F0; color:#12907F; }
.inc-title { font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; color:var(--navy); font-size:14px; line-height:1.2; margin:0 0 6px; }
.inc-text { color:#4a5a63; font-size:13.5px; line-height:1.5; margin:0; }
.inc-block .cta-row { justify-content:center; }
@media (max-width:1100px) { .inc-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) {
  .inc-grid { grid-template-columns:1fr; gap:18px; text-align:left; }
  .inc-item { flex-direction:row; align-items:center; gap:16px; }
  .inc-icon { width:60px; height:60px; margin-bottom:0; }
  .inc-title { font-size:15px; margin-bottom:3px; }
  .inc-text { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { .inc-icon, .inc-icon svg { transition:none; } .inc-item:hover .inc-icon, .inc-item:hover .inc-icon svg { transform:none; } }
.inc-note { text-align:center; color:var(--muted); font-size:13px; line-height:1.5; max-width:720px; margin:-8px auto 26px; }
.inc-note strong { color:var(--navy); }

/* ---- mapa y calendario lado a lado ---- */
.tp-badge { text-align:center; margin:0 auto 26px; }
.tp-badge img { width:220px; height:auto; display:inline-block; }
/* el calendario va solo en su bloque (dos meses en desktop) y el mapa queda debajo */
.tp-calblock { margin:0 auto 56px; }
.tp-calblock .sba-calendar-container .day-header { min-width:0; font-size:10px; padding:9px 2px; }
.tp-calblock .sba-calendar-container .day-cell { min-width:0; } /* la clase real es .day-cell: con .calendar-day la grilla no podia achicarse */
.tp-map { text-align:center; }
.tp-map .section-heading { margin-bottom:22px; }
.tp-map .img-cover { width:100%; max-width:860px; height:auto; margin:0 auto; }
.tp-map .qa-lead { max-width:720px; margin-left:auto; margin-right:auto; }
@media (max-width:900px) {
  .tp-calblock .tp-calendar-card { max-width:760px; margin:0 auto; width:100%; }
}

/* ---- banner Travel With Purpose: mismo tratamiento que el bloque de la home ---- */
.tp-purpose {
  display:grid; grid-template-columns:1.1fr 1fr; grid-template-areas:"copy media" "icons icons";
  align-items:center; gap:clamp(24px,3.4vw,44px) clamp(28px,4vw,56px);
  background:#07293F; color:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 18px 44px rgba(11,43,60,.22);
  padding:clamp(34px,4.4vw,54px) clamp(26px,3.4vw,46px);
  margin:0 auto 56px;
}
/* la regla .tp-block + .tp-block mete padding y borde dentro de la tarjeta: se anula aca */
.tp-block + .tp-purpose { padding-top:clamp(34px,4.4vw,54px); border-top:0; margin-top:clamp(72px,9vw,120px); }
.tp-purpose-copy { grid-area:copy; }
.tp-purpose-kicker { display:inline-block; font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; color:var(--gold); margin-bottom:12px; }
.tp-purpose-title { font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase; color:#fff; font-size:clamp(22px,2.6vw,32px); line-height:1.12; margin:0 0 14px; text-wrap:pretty; }
.tp-purpose-accent { color:var(--gold); }
.tp-purpose-text { color:#CFE2F0; font-size:clamp(15px,1.3vw,17px); line-height:1.5; margin:0; max-width:520px; }
.tp-purpose-media { grid-area:media; position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.tp-purpose-media img { width:100%; height:100%; object-fit:cover; display:block; }
.tp-purpose-icons { grid-area:icons; list-style:none; margin:0; padding:clamp(22px,3vw,32px) 0 0; border-top:1px solid rgba(255,255,255,.14); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.tp-purpose-icon-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.tp-purpose-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; border:2px solid var(--gold); color:var(--gold); background:rgba(255,255,255,.04); transition:transform .28s cubic-bezier(.22,.61,.36,1), background .2s ease, color .2s ease; }
.tp-purpose-icon-item:hover .tp-purpose-icon { transform:scale(1.12); background:var(--gold); color:#07293F; }
.tp-purpose-icon-label { font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; font-size:12.5px; letter-spacing:.04em; line-height:1.3; color:#fff; }
@media (max-width:900px) {
  .tp-purpose { grid-template-columns:1fr; grid-template-areas:"copy" "media" "icons"; text-align:center; gap:22px; padding:clamp(26px,5vw,38px) 20px; }
  .tp-purpose-text { max-width:none; }
  .tp-purpose-media { width:100%; max-width:560px; margin:0 auto; border-radius:16px; }
  .tp-purpose-icons { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .tp-purpose-icon { width:54px; height:54px; }
  .tp-purpose-icon svg { width:22px; height:22px; }
  .tp-purpose-icon-label { font-size:10.5px; letter-spacing:.02em; }
}
@media (prefers-reduced-motion:reduce) { .tp-purpose-icon { transition:none; } .tp-purpose-icon-item:hover .tp-purpose-icon { transform:none; } }
.tp-route-cta { justify-content:center; margin-top:34px; }
@media (max-width:759px) { .tp-route-cta { margin-top:22px; } .tp-route-cta .btn-gold { width:100%; justify-content:center; } }

/* ---- Frequent Questions: links a la FAQ en tres columnas ---- */
.faq-band .section-heading { margin-bottom:26px; }
.faq-links { list-style:none; margin:0 auto; padding:0; max-width:1100px; display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px; }
.faq-links li { border-bottom:1px solid #E4EDF1; }
.faq-link { display:flex; align-items:center; gap:12px; padding:13px 4px; color:var(--navy); text-decoration:none; font-size:15px; line-height:1.3; transition:color .2s ease; }
.faq-link:hover { color:var(--teal); }
.faq-plus { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#E9F1F5; color:var(--navy); font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px; line-height:1; transition:background .2s ease, color .2s ease; }
.faq-link:hover .faq-plus { background:var(--teal); color:#fff; }
.faq-link-more { font-weight:700; }
@media (max-width:900px) { .faq-links { grid-template-columns:repeat(2,1fr); gap:0 28px; } }
@media (max-width:600px) { .faq-links { grid-template-columns:1fr; } .faq-link { font-size:14.5px; padding:12px 2px; } }

/* ---- Frequent Questions: acordeon con el estilo de la pagina de FAQ, en dos columnas ---- */
.faq-acc { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; align-items:start; }
.faq-item { background:var(--gray); border:1px solid #E4EDF1; border-radius:14px; padding:0 20px; transition:background .3s ease, border-color .3s ease; }
.faq-item[open] { background:#fff; border-color:var(--teal2); }
.faq-sum { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 0; }
.faq-sum::-webkit-details-marker { display:none; }
.faq-q { margin:0; font-family:'Montserrat',sans-serif; font-weight:700; color:var(--navy); font-size:16px; line-height:1.3; text-wrap:pretty; }
.faq-plus { color:var(--gold); font-size:24px; font-weight:800; line-height:1; flex:none; transition:transform .25s ease; }
.faq-item[open] .faq-plus { transform:rotate(45deg); }
.faq-body { padding:0 0 8px; overflow:hidden; }
.faq-body p { color:var(--muted); font-size:15px; margin:0 0 14px; text-wrap:pretty; }
.faq-body ul { color:var(--muted); font-size:15px; margin:0 0 14px; padding-left:20px; }
.faq-body li { margin:0 0 5px; }
.faq-body strong { color:var(--navy); }
.faq-more { text-align:center; margin:28px 0 0; }
.faq-more a { display:inline-flex; align-items:center; gap:7px; color:var(--teal); text-decoration:none; font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:13px; }
.faq-more a:hover { color:var(--orange); }
@media (max-width:800px) { .faq-acc { grid-template-columns:1fr; } .faq-q { font-size:15px; } .faq-item { padding:0 16px; } }

/* ---- Hero de la ruta: sin tarjeta flotante, titulo en tres lineas y CTA ---- */
.hero-trip-inner { grid-template-columns:1fr; }
.hero-trip .hero-copy { max-width:860px; }
.hero-trip .hero-kicker { display:inline-block; font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; color:var(--gold); margin-bottom:14px; }
@media (min-width:641px) { .hero-trip .hero-route { white-space:nowrap; } }
.hero-trip-cta { margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.hero-trip-cta .btn-gold { font-size:15px; padding:15px 30px; gap:10px; }
.hero-trip-note { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:#DCEBF7; }
.hero-trip-note svg { flex:none; color:var(--gold); }
@media (max-width:640px) {
  .hero-trip-cta { margin-top:24px; gap:12px; }
  .hero-trip-cta .btn-gold { width:100%; justify-content:center; }
  .hero-trip-note { width:100%; justify-content:center; font-size:12.5px; }
}

/* ---- Heros sin la capa oscura sobre la foto (el texto se apoya en la sombra) ---- */
.hero-overlay, .hero-video .hero-overlay, .hero-trip .hero-overlay { background:none; }
.hero-title, .hero-subtitle, .hero-text, .hero-kicker, .hero-feat, .hero-crumbs, .hero-trip-days { text-shadow:0 2px 16px rgba(0,0,0,.55); }

/* ---- "Explore the Trip" a la izquierda (solo en las subpaginas, que son las que tienen aside) ---- */
.tp-layout:not(.tp-onecol) { grid-template-columns:340px minmax(0,1fr); }
.tp-layout:not(.tp-onecol) .tp-side { order:-1; }
@media (min-width:1101px) { .tp-layout:not(.tp-onecol) { grid-template-columns:420px minmax(0,1fr); } }
@media (max-width:759px) { .tp-layout:not(.tp-onecol) { grid-template-columns:1fr; } }

/* ---- Mobile: que se vea mas la foto del hero ---- */
@media (max-width:640px) {
  /* el texto ocupa menos ancho y deja ver la foto a la derecha */
  .hero .hero-inner { padding-right:clamp(58px,16vw,92px); }
  .hero .hero-title { font-size:clamp(25px,7.6vw,31px); }
  .hero .hero-text { font-size:14px; }
  /* los botones dejan de ocupar todo el ancho y arrancan a la izquierda */
  .hero .hero-actions { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:10px; }
  .hero .hero-actions .btn-gold,
  .hero .hero-actions .btn-teal,
  .hero .hero-actions .btn-outline { width:auto; font-size:12.5px; padding:12px 18px; gap:8px; }
}

/* ---- Mobile: el boton del hero de la ruta, chico y a la izquierda ---- */
@media (max-width:640px) {
  .hero-trip-cta { justify-content:flex-start; }
  .hero-trip-cta .btn-gold { width:auto; justify-content:flex-start; font-size:12.5px; padding:12px 18px; }
}

/* ---- el precio del hero va en su propia linea, debajo de los dias ---- */
.hero-price { display:block; color:var(--gold); font-family:'Montserrat',sans-serif; font-weight:900;
  font-size:clamp(30px,3.6vw,46px); line-height:1; margin:12px 0 0; text-shadow:0 2px 16px rgba(0,0,0,.55);
  animation:heroRise 1.5s cubic-bezier(.22,.61,.36,1) .62s both; }
@media (max-width:640px) { .hero-price { font-size:26px; margin-top:10px; } }
@media (prefers-reduced-motion:reduce) { .hero-price { animation:none !important; } }
.hero-trip-price { margin-top:10px; }

/* ---- El calendario se ensancha mas alla del contenedor en desktop ----
   El clamp nunca se pasa del ancho libre que deja .section-inner (1200px),
   y los 1240 dejan margen para la barra de scroll, que 100vw no descuenta. */
@media (min-width:901px) {
  .tp-calblock { margin-inline:calc(-1 * clamp(0px, (100vw - 1240px) / 2, 200px)); }
}

/* Tres meses necesitan ~302px cada uno: abajo de 1100 la grilla se cortaria,
   asi que ahi se muestran dos y el boton de siguiente vuelve al segundo. */
@media (min-width:901px) and (max-width:1150px) {
  .tp-calblock .sba-calendar-container.sba-multi-month .calendar-container:nth-child(3) { display:none; }
  .tp-calblock .sba-calendar-container.sba-multi-month .calendar-container:nth-child(2) .nav-btn[data-action="next"] { visibility:visible; }
}

/* ---- Los titulos van en Anton, igual que en la home ----
   Solo los titulos grandes: de pagina y de seccion. Las preguntas de FAQ y la
   guia, los titulos de tarjeta y las etiquetas chicas siguen en Montserrat,
   que a ese cuerpo se lee mejor que una display.
   Anton tiene un solo peso (400): pedirle 800 o 900 hace que el navegador
   invente la negrita. */
.hero-title,
.section-heading,
.cta-title,
.route-heading,
.qa-heading,
.faq-heading,
.guide-h2,
.tp-purpose-title,
.diff-title,
.guide-topic-t {
  font-family:'Anton', Impact, sans-serif;
  font-weight:400;
  letter-spacing:normal;
}

/* ---- Header transparente sobre el hero, igual que en la home ----
   La pagina lo pide con $SBA_HEADER_TRANSPARENTE antes del include del header.
   El header deja de ocupar lugar, el hero arranca pegado arriba y al bajar
   aparece el fondo de la barra mientras la de ofertas se recoge. */
.header-over { position:fixed; left:0; right:0; top:0; }
.header-over .nav-bar {
  background:transparent;
  box-shadow:none;
  transition:background .3s ease, box-shadow .3s ease;
}
.header-over .promo-bar {
  overflow:hidden;
  max-height:60px;
  transition:max-height .3s ease, opacity .25s ease;
}
.header-over.is-scrolled .promo-bar { max-height:0; opacity:0; }
.header-over.is-scrolled .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);
}
/* El header queda encima, asi que el contenido del hero arranca mas abajo: el
   padding original, clamp(48px,7vw,92px), no alcanzaba para despejarlo. */
/* ~ y no +: entre el header y el hero quedo el script que marca el scroll */
.header-over ~ .hero .hero-inner,
.header-over ~ .guide-hero .hero-inner { padding-top:clamp(124px,13vh,152px); }
@media (prefers-reduced-motion:reduce) {
  .header-over .nav-bar, .header-over .promo-bar { transition:none; }
}

/* Un degradado leve detras del menu, para que se lea sobre fotos claras sin
   que parezca una barra. Cuando baja el scroll gana el fondo solido, que tiene
   mas especificidad. */
.header-over .nav-bar {
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.16) 55%,rgba(0,0,0,0) 100%);
}

/* El menu de mobile tapa el header entero (va fijo y por encima), asi que
   quedaba un navy plano al lado de la barra, que si tiene degradado. Toma el
   mismo de la barra, girado a vertical porque el panel es alto. */
.mobile-panel {
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 42%,var(--teal) 86%,var(--teal2) 100%);
}

/* ── Hero al estilo del de la home ─────────────────────────────────────── */
/* Mismo esquema que .hero-video: alto completo, sin capa encima, kicker de
   pincel, titulo en Anton con la segunda linea calada y el pie con el precio. */
.hero-trip { min-height:100vh; min-height:100svh; align-items:stretch; }
.hero-trip-inner {
  /* stretch y no el center que traia la grilla de antes: si no, el titulo y
     el pie se centran cada uno por su cuenta en vez de arrancar en el margen */
  display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  gap:clamp(20px,3vh,38px);
  max-width:1400px; padding-left:22px; padding-right:22px;
  padding-top:clamp(110px,13vh,150px); padding-bottom:clamp(40px,7vh,80px);
}
.hero-trip .hero-copy { max-width:none; }
.hero-trip .hero-kicker {
  font-family:'Permanent Marker',cursive; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--gold);
  font-size:clamp(20px,2.2vw,30px); line-height:1.1;
  margin-bottom:clamp(8px,1.4vh,16px); text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.hero-trip .hero-title {
  font-family:'Anton', Impact, sans-serif; font-weight:400; letter-spacing:normal;
  font-size:clamp(42px,11.4vw,140px); line-height:.94; margin:0;
}
/* la segunda linea va calada; si el navegador no soporta el trazo queda llena */
.hero-trip .hero-title-line { display:block; color:#fff; }
@supports (-webkit-text-stroke: 2px #fff) {
  .hero-trip .hero-title-line {
    color:transparent; -webkit-text-stroke:clamp(1.4px,.2vw,2.6px) #fff; text-shadow:none;
    /* drop-shadow y no text-shadow: sigue el trazo en vez de dibujar la silueta */
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
  }
}
.hero-trip .hero-foot {
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(16px,2.4vh,26px);
}
.hero-trip .hero-foot-text {
  max-width:620px; margin:0; color:#fff; text-wrap:pretty;
  font-size:clamp(15px,1.3vw,18px); line-height:1.5;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.6);
}
.hero-trip .hero-foot-price {
  display:block; font-family:'Anton', Impact, sans-serif; font-weight:400; letter-spacing:normal;
  font-size:2em; line-height:1.08; margin-top:2px;
}
.hero-trip-cta { margin-top:0; }
@media (max-width:640px) {
  .hero-trip-inner { padding-top:118px; padding-bottom:48px; gap:22px; }
  .hero-trip .hero-kicker { font-size:21px; }
  .hero-trip .hero-title { font-size:clamp(34px,10.5vw,54px); }
  .hero-trip-cta .btn-gold { width:auto; justify-content:flex-start; }
}
@media (max-width:360px) { .hero-trip .hero-title { font-size:32px; } }

/* ── Calendario en mobile: una caja sola ───────────────────────────────── */
/* El widget ya trae su propia tarjeta blanca, asi que la de afuera solo le
   robaba 52px de ancho y dejaba las celdas apretadas. */
@media (max-width:759px) {
  .tp-calendar-card { background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
}

/* ── Travel With Purpose con el estilo del bloque de la home ───────────── */
/* Misma inversion: el navy pasa a ser la tinta y el teal el fondo, y la fila
   de iconos se vuelve pastillas claras repartidas a lo ancho. */
.tp-purpose { background:var(--teal2); color:#07293F; }
.tp-purpose-kicker { color:#07293F; }
.tp-purpose-title { color:#07293F; font-size:clamp(28px,3.8vw,52px); line-height:1.03; margin-bottom:18px; }
.tp-purpose-accent { color:#07293F; }
.tp-purpose-text { color:#fff; }
.tp-purpose-icons {
  border-top-color:rgba(7,41,63,.22);
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; grid-template-columns:none;
}
.tp-purpose-icon-item {
  flex:1 1 0; min-width:0;
  flex-direction:row; align-items:center; justify-content:center; gap:11px; text-align:left;
  background:#F6FAFD; border:2px solid #07293F; border-radius:16px; padding:12px 18px 12px 13px;
}
.tp-purpose-icon {
  width:40px; height:40px; flex:none; border:0; border-radius:12px;
  background:rgba(7,41,63,.09); color:#07293F;
}
.tp-purpose-icon svg { width:22px; height:22px; }
.tp-purpose-icon-item:hover .tp-purpose-icon { transform:none; background:rgba(7,41,63,.09); color:#07293F; }
.tp-purpose-icon-label {
  font-family:'Anton', Impact, sans-serif; font-weight:400; letter-spacing:normal;
  text-transform:uppercase; font-size:18px; line-height:1; color:#07293F;
}
@media (max-width:760px) {
  /* apiladas, centrar cada pastilla por su cuenta dejaba cada icono en una
     x distinta segun lo largo del texto: se alinean todos a la izquierda */
  .tp-purpose-icon-item { flex:1 1 calc(50% - 6px); justify-content:flex-start; padding:10px 14px 10px 10px; border-radius:14px; gap:9px; }
  .tp-purpose-icon { width:34px; height:34px; border-radius:10px; }
  .tp-purpose-icon svg { width:18px; height:18px; }
  .tp-purpose-icon-label { font-size:15.5px; }
}
@media (max-width:480px) { .tp-purpose-icon-item { flex:1 1 100%; } }

/* ── What's Included en oscuro, igual que el Why Choose de la home ─────── */
.inc-block {
  background:#07293F; color:#fff; border-radius:22px;
  padding:clamp(30px,4vw,48px) clamp(22px,3.2vw,40px);
  box-shadow:0 18px 44px rgba(11,43,60,.22);
}
.inc-block .section-heading { color:#fff; }
/* de seis columnas sueltas a tres tarjetas por fila */
.inc-grid { grid-template-columns:repeat(3,1fr); gap:14px; text-align:left; margin-bottom:26px; }
.inc-item {
  flex-direction:row; align-items:center; gap:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  border-radius:16px; padding:15px 18px;
}
.inc-icon { width:56px; height:56px; border-radius:14px; margin-bottom:0; box-shadow:none; }
.inc-icon svg { width:26px; height:26px; }
.inc-item:hover .inc-icon { transform:scale(1.06); box-shadow:none; }
/* los pastel se apagaban contra el navy: el color va al fondo de la placa */
.inc-c-blue   { background:#1B7FA8; color:#fff; }
.inc-c-yellow { background:#E8A400; color:#fff; }
.inc-c-green  { background:#1E9E5A; color:#fff; }
.inc-c-orange { background:#F08A24; color:#fff; }
.inc-c-red    { background:#E5394F; color:#fff; }
.inc-c-teal   { background:#12907F; color:#fff; }
.inc-title {
  font-family:'Anton', Impact, sans-serif; font-weight:400; letter-spacing:normal;
  color:#fff; font-size:18px; line-height:1.1; margin:0 0 4px;
}
.inc-text { color:#A9C3D4; font-size:13.5px; line-height:1.45; }
.inc-note { color:#A9C3D4; }
.inc-note strong { color:#fff; }
@media (max-width:1100px) { .inc-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) {
  .inc-grid { grid-template-columns:1fr; gap:12px; }
  .inc-item { padding:14px 16px; }
  .inc-title { font-size:17px; }
  .inc-text { font-size:13.5px; }
}
@media (max-width:360px) {
  .inc-icon { width:48px; height:48px; border-radius:12px; }
  .inc-icon svg { width:22px; height:22px; }
  .inc-title { font-size:16px; }
}

/* ── Included, testimonio y Travel With Purpose a todo el ancho ────────── */
/* Los dos bloques salieron del contenedor de la pagina: ahora la banda lleva
   el color de borde a borde y adentro va el mismo ancho del resto. */
.inc-band { background:#07293F; }
.inc-band .inc-block { background:none; box-shadow:none; border-radius:0; padding:0; max-width:none; margin:0; }
.inc-band .section-heading { color:#fff; font-size:clamp(30px,4.4vw,56px); margin-bottom:clamp(26px,3.2vw,42px); }
.purpose-band { background:var(--teal2); }
.purpose-band .tp-purpose {
  background:none; box-shadow:none; border-radius:0; padding:0; max-width:none; margin:0;
}

/* ── Testimonio a pantalla completa, igual que en la home ──────────────── */
.quote-band { position:relative; overflow:hidden; }
.quote-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 32%; }
.quote-band::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(11,60,93,.93) 0%,rgba(11,60,93,.8) 40%,rgba(11,60,93,.38) 72%,rgba(11,60,93,.2) 100%);
}
.quote-inner { position:relative; z-index:1; max-width:1400px; margin:0 auto; padding:clamp(72px,9vw,128px) 22px; }
.quote-copy { max-width:780px; }
.quote-kicker {
  display:inline-block; font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:.14em; font-size:12.5px; color:var(--gold); margin-bottom:16px;
}
.quote-kicker::before {
  content:''; display:inline-block; width:26px; height:3px; border-radius:2px;
  background:var(--gold); vertical-align:middle; margin-right:12px;
}
.quote-title {
  font-family:'Anton', Impact, sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:normal;
  color:#fff; font-size:clamp(38px,6.6vw,99px); line-height:1.03; margin:0 0 26px;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.quote-text {
  font-family:'Open Sans',sans-serif; color:rgba(255,255,255,.93); font-size:17px; line-height:1.5;
  margin:0 0 18px; max-width:720px; text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.quote-brush {
  font-family:'Permanent Marker',cursive; color:var(--teal2); font-size:clamp(20px,2.3vw,30px);
  line-height:1.55; margin:30px 0 0; max-width:720px; text-shadow:0 2px 12px rgba(0,0,0,.45);
}
@media (max-width:860px) {
  .quote-band::after { background:linear-gradient(180deg,rgba(11,60,93,.88) 0%,rgba(11,60,93,.82) 100%); }
  .quote-bg { object-position:62% 28%; }
  .quote-text { font-size:15.5px; }
}
@media (max-width:560px) {
  .quote-kicker { font-size:10.5px; letter-spacing:.1em; }
  .quote-kicker::before { width:18px; margin-right:9px; }
  .quote-title { font-size:clamp(31px,9.6vw,48px); margin-bottom:20px; }
  .quote-inner { padding-left:18px; padding-right:18px; }
}

/* ── Recommended By: la misma tira de logos que la home ────────────────── */
.press-band { background:var(--gray); border-top:1px solid #E4EDF1; border-bottom:1px solid #E4EDF1; }
.press-inner {
  max-width:1240px; margin:0 auto; padding:clamp(40px,4.6vw,62px) 22px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(22px,3vw,44px);
}
.press-kicker {
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:.14em; font-size:14px; color:var(--navy);
}
.press-logos { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(26px,4vw,60px); }
.press-logo {
  height:clamp(64px,7vw,88px); width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.85; transition:filter .25s ease, opacity .25s ease;
}
.press-logo:hover { filter:none; opacity:1; }
/* en mobile los logos se deslizan en vez de apilarse */
@media (max-width:640px) {
  .press-inner { padding:34px 18px; gap:18px; }
  .press-kicker { font-size:12.5px; }
  .press-logos {
    width:100%; min-width:0; flex-wrap:nowrap; justify-content:flex-start; gap:26px;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none; padding:2px 0 4px;
  }
  .press-logos::-webkit-scrollbar { display:none; }
  .press-logo { flex:0 0 auto; height:54px; scroll-snap-align:center; }
}

/* ── El boton final en mobile ──────────────────────────────────────────── */
/* A todo el ancho y con 34px de padding el texto partia en dos renglones y
   quedaba un bloque enorme: vuelve a medir lo que ocupa su texto. */
@media (max-width:640px) {
  .cta-main-btn {
    width:auto; max-width:100%; white-space:nowrap;
    font-size:14.5px; padding:15px 26px; margin:22px 0 30px;
  }
}

/* ── El calado del hero, mas fino en pantallas chicas ──────────────────── */
@media (max-width:900px) {
  @supports (-webkit-text-stroke: 2px #fff) { .hero-trip .hero-title-line { -webkit-text-stroke-width:1.1px; } }
}
@media (max-width:640px) {
  @supports (-webkit-text-stroke: 2px #fff) { .hero-trip .hero-title-line { -webkit-text-stroke-width:.9px; } }
}

/* ── What's Included: carrusel de a tres en mobile ─────────────────────── */
.inc-dots { display:none; justify-content:center; gap:8px; }
.inc-dots button {
  width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.26);
  border:none; padding:0; cursor:pointer; transition:width .25s ease, background .25s ease;
}
.inc-dots button.is-active { width:22px; background:var(--teal2); }
@media (max-width:760px) {
  .inc-grid {
    grid-template-columns:none; grid-auto-flow:column;
    grid-template-rows:repeat(3,auto); grid-auto-columns:100%;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
    gap:12px 0; margin-bottom:18px; padding-bottom:2px;
  }
  .inc-grid::-webkit-scrollbar { display:none; }
  .inc-item { scroll-snap-align:start; }
  .inc-dots { display:flex; margin-bottom:22px; }
}
@media (prefers-reduced-motion:reduce) { .inc-dots button { transition:none; } }

/* ── La tira de navegacion de las subpaginas, pegada al menu ───────────── */
/* Estaba clavada en top:106px, la altura del header con la barra de ofertas
   abierta. Al scrollear esa barra se recoge y el header mide 80, asi que
   quedaba un hueco de 26px por donde pasaba el texto. */
@media (max-width:759px) {
  .mobile-trip-strip { top:80px; }
}

/* ── La tarjeta del calendario, a la altura del header recogido ────────── */
/* Estaba en 112px, que es el header con la barra de ofertas abierta; al
   bajar el header mide 80, asi que 92 deja los mismos 12px de aire. */
.tp-calendar-card { top:92px; }

/* ── Mobile: menos aire entre los primeros bloques ─────────────────────── */
/* 60px de margen mas 60 de padding dejaban 120px de blanco entre el
   calendario y el mapa: en una pantalla de 375 es casi un tercio de alto
   vacio. La linea divisoria sigue, con la mitad de aire a cada lado. */
@media (max-width:759px) {
  .tp-block + .tp-block { margin-top:30px; padding-top:30px; }
  .tp-calblock { margin-bottom:24px; }
}

/* ── Mobile: el hero corta en la linea de la Y de LEGENDARY ────────────── */
/* "THE LEGENDARY" en Anton mide 5.646em; con el titulo en 10.5vw (tope de
   54px) su borde derecho cae en 59.3vw, y ahi cortan tambien el kicker y el
   pie en vez de irse hasta el margen. El kicker ademas baja a 17px. */
@media (max-width:640px) {
  .hero-trip .hero-kicker { font-size:17px; max-width:min(59.3vw,305px); }
  .hero-trip .hero-foot-text { max-width:min(59.3vw,305px); }
}

/* ── El testimonio en mobile: vuelve el velo de la izquierda ───────────── */
/* Abajo de 860 el degrade pasaba a ser un velo parejo de arriba a abajo, al
   .88, y tapaba la foto entera. Vuelve a ser horizontal: oscuro donde esta
   el texto y abriendose hacia la derecha para que la foto se vea. */
@media (max-width:860px) {
  .quote-band::after {
    background:linear-gradient(90deg,rgba(11,60,93,.92) 0%,rgba(11,60,93,.82) 45%,rgba(11,60,93,.55) 80%,rgba(11,60,93,.4) 100%);
  }
}

/* ── "Who's it for?": la tarjeta clara sobre la foto ───────────────────── */
/* El mismo bloque de la home y en el mismo lugar, entre las resenas y
   Travel With Purpose. La foto va sin velo: el texto blanco se sostiene con
   sus propias sombras. */
.wf-band { position:relative; overflow:hidden; }
.wf-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.wf-inner {
  position:relative; z-index:1; max-width:1240px; margin:0 auto;
  padding:clamp(70px,9vw,120px) 22px;
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center;
  gap:clamp(28px,4vw,64px);
}
.wf-copy { color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.45); }
.wf-title {
  font-family:'Anton', Impact, sans-serif; font-weight:400; letter-spacing:normal;
  text-transform:uppercase; font-size:clamp(30px,3.9vw,56px); line-height:1.02; margin:0 0 12px;
}
.wf-sub {
  display:block; font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:clamp(14px,1.3vw,18px); margin:0 0 12px;
}
/* una sombra corta para el borde y una larga para separarlo del fondo */
.wf-line {
  font-family:'Permanent Marker',cursive; color:#fff;
  font-size:clamp(22px,2.4vw,32px); line-height:1.15; margin:0 0 24px;
  text-shadow:0 2px 6px rgba(0,0,0,.6), 0 4px 22px rgba(0,0,0,.65);
}
.wf-card {
  background:#F6FAFD; border-radius:22px; box-shadow:0 22px 50px rgba(11,43,60,.3);
  padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,46px); justify-self:end;
}
.wf-kicker {
  display:block; font-family:'Anton', Impact, sans-serif; font-weight:400; letter-spacing:normal;
  text-transform:uppercase; color:var(--orange);
  font-size:clamp(26px,3.2vw,40px); line-height:1.05; margin-bottom:14px;
}
.wf-text {
  font-family:'Open Sans',sans-serif; color:var(--navy);
  font-size:clamp(17px,1.5vw,21px); line-height:1.5; margin:0;
}
/* apilado, de la columna de la izquierda queda solo el Book Now, debajo */
@media (max-width:900px) {
  .wf-inner { grid-template-columns:1fr; gap:26px; }
  .wf-card { justify-self:stretch; }
  .wf-copy { display:flex; justify-content:center; order:2; }
  .wf-copy > :not(.btn-gold) { display:none; }
}
@media (max-width:640px) {
  .wf-card { padding:24px 20px; border-radius:18px; }
  .wf-kicker { font-size:24px; margin-bottom:10px; }
  .wf-text { font-size:16.5px; }
  .wf-title { font-size:clamp(27px,8vw,40px); }
  .wf-line { font-size:22px; margin-bottom:20px; }
}

/* ── El mapa, a todo el ancho de su caja ───────────────────────────────── */
/* Estaba topado en 860px y el bloque mide 1200: el mapa quedaba chico y con
   aire a los costados. El parrafo ahora va arriba, entre el titulo y el
   mapa, asi que lleva su aire abajo y no arriba. */
.tp-map .img-cover { max-width:none; width:100%; }
.tp-map .qa-lead { margin:0 auto 20px; }
/* Va en el flujo del pie, no anclada: asi acompaña al boton en cualquier
   alto de pantalla. El logo ya trae su forma de pastilla, no lleva fondo. */

/* ── Recommended By: fondo blanco y sin el salto al deslizar ───────────── */
/* El fondo gris lo separaba de las bandas blancas de al lado sin necesidad.
   Y cada logo traia su propio reveal: los que todavia no entraron estan
   fuera del recorte, asi que al deslizar aparecian subiendo 26px y se leia
   como un scroll vertical dentro de la tira. */
.press-band { background:#fff; }
@media (max-width:640px) {
  .press-logos > .reveal { opacity:1; transform:none; transition:none; }
}

/* ── La tira de confianza en mobile: de a uno ──────────────────────────── */
/* Los seis items apilados eran una columna larguisima. Abajo de 760 pasan a
   ser un carrusel de a uno, que el js hace avanzar solo cada tres segundos. */
@media (max-width:760px) {
  .trust-bar-inner {
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:100%;
    gap:0; padding:18px 0;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .trust-bar-inner::-webkit-scrollbar { display:none; }
  .trust-bar-inner .icon-row { scroll-snap-align:start; justify-content:center; padding:0 20px; }
}

/* ── Hero en movil: las tres fotos se van pasando solas ────────────────────
   La primera es la que ya trae el <picture> (el <source> de movil), asi que
   el navegador baja una sola imagen para el primer pintado. Las otras dos las
   agrega el JS despues de cargar la pagina, solo si la pantalla es angosta.
   En desktop no cambia nada: sigue la foto unica con su zoom. */
.hero-slides {
  overflow:hidden;
  /* CONTEXTO DE APILADO PROPIO. Sin esto, el z-index que el JS le pone a la
     foto que entra compite con el velo y el texto del hero (que estan al
     mismo nivel) y los tapa apenas cambia la primera foto. */
  z-index:0; isolation:isolate;
}
.hero-slides .hero-slide {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
@media (max-width:760px) {
  /* el zoom lento se lleva mal con el cruce: en movil solo funden */
  .hero-slides .hero-slide { animation:none; opacity:0; transition:opacity .7s ease; }
  .hero-slides .hero-slide.is-on { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-slides .hero-slide { transition:none; }
}

/* ── Travel With Purpose: el laberinto de la mola, muy tenue ───────────────
   Va como CAPA DE FONDO del propio bloque, no como pseudo-elemento: los
   fondos se pintan siempre por debajo del contenido, asi que no hay z-index
   que pueda terminar tapando el texto. La opacidad viene horneada en el SVG
   (stroke-opacity), por eso tampoco hace falta una capa aparte. */
/* OJO: aca el teal NO lo pinta .tp-purpose sino la seccion que la contiene;
   .purpose-band .tp-purpose lleva background:none y gana por especificidad. */
.purpose-band {
  background-color: var(--teal2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M100 100H112V112H88V88H124V124H76V76H136V136H64V64H148V148H52V52H160V160H40V40H172V172H28V28H184V184H16V16H196' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='6'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}
@media (max-width:760px) { .purpose-band { background-size:130px 130px; } }

/* ── El sello de Tripadvisor, en el blanco entre la barra y el calendario ── */
.award-strip { background:#fff; text-align:center; padding:30px 22px 6px; }
.award-strip-img {
  display:inline-block; width:220px; height:auto;
  filter:drop-shadow(0 6px 16px rgba(11,43,60,.18));
}
@media (max-width:640px) {
  .award-strip { padding:22px 18px 4px; }
  .award-strip-img { width:168px; }
}

/* ── Los carruseles no empujan la pagina ───────────────────────────────────
   Un carrusel horizontal que llega al final le pasa el gesto al documento:
   en el telefono la pagina rebota de costado y parece que sobrara ancho a la
   derecha. overscroll-behavior-x corta esa cadena. Varios ya lo traian; aca
   quedan todos, y la regla no cambia nada en los que no llegan a desbordar. */
.route-track, .rv-track, .hl-grid, .inc-grid, .trust-bar-inner, .why-trust,
.mobile-trip-strip, .compare-table-wrap, .offers-car-track, .ta-cards,
.press-logos, .blog-tags-inner, .hero-track, .tp-calendar-card {
  overscroll-behavior-x: contain;
}