/* 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-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:1240px;
  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 (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; }
}

/* ---------- 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);
}

/* ============ Home ============ */
.hero-split { display:grid; grid-template-columns:1fr 1fr 1fr; min-height:clamp(680px,86vh,900px); gap:4px; background:#fff; }
.hero-track { display:contents; }
.hero-panel { position:relative; overflow:hidden; border:1.5px solid #fff; }
.hero-panel .bg-media, .hero-panel video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-panel-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,43,60,.05) 40%,rgba(11,43,60,.55) 70%,rgba(11,43,60,.88) 100%);
}
.hero-panel-body { position:absolute; left:0; right:0; bottom:0; padding:32px 28px; z-index:1; }
.hero-panel-kicker {
  font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(24px,2.6vw,34px); color:var(--gold2); display:block; line-height:1.1;
}
.hero-panel-title {
  font-family:'Montserrat',sans-serif; font-weight:800; color:#fff; font-size:clamp(20px,2vw,26px); margin:2px 0 8px;
}
.hero-panel-sub { color:#EAF6FA; font-size:14.5px; margin:0 0 10px; }
.hero-panel-price { font-family:'Montserrat',sans-serif; font-weight:900; color:var(--gold2); font-size:22px; display:block; margin-bottom:14px; }
.hero-panel-btn {
  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:.03em;
  font-size:12.5px; padding:11px 20px; border-radius:8px;
}
.hero-panel-btn:hover { background:var(--teal); }
@media (max-width:900px) {
  .hero-split { position:relative; display:block; min-height:auto; }
  .hero-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
  .hero-track::-webkit-scrollbar { display:none; }
  .hero-panel { min-height:520px; flex:0 0 100%; scroll-snap-align:center; }
}
.band-navy { background:#fff; }
.route-tiles {
  max-width:1240px;
  margin:0 auto;
  padding:clamp(28px,3.4vw,44px) 22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.route-tile {
  position:relative;
  overflow:hidden;
  border-radius:18px;
  min-height:300px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.route-tile:hover {
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(11,60,93,.28);
  color:#fff;
}
.route-tile-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(11,60,93,.05) 30%,rgba(11,60,93,.55) 62%,rgba(11,60,93,.92) 100%);
}
.route-tile-body {
  position:relative;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}
.route-tile-kicker {
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--aqua);
}
.route-tile-title {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(20px,2.3vw,26px);
  line-height:1.05;
  margin:0;
}
.route-tile-sub {
  font-size:13.5px;
  color:#EAF6FA;
  margin:2px 0 0;
}
.route-tile-price {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:26px;
  color:var(--gold);
  line-height:1.1;
  margin-top:6px;
}
.route-tile-cta {
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.island-exp {
  max-width:820px;
  margin:0 auto;
  padding:clamp(48px,6vw,80px) 22px;
  text-align:center;
  color:var(--navy);
}
.island-exp-logo {
  width:150px;
  margin:0 auto 22px;
}
.island-exp-title {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(24px,3.4vw,38px);
  line-height:1.05;
  margin:0 0 14px;
}
.island-exp-lead {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:14px;
  color:var(--gold);
  margin:0 0 14px;
}
.island-exp-text {
  color:#4a5a63;
  font-size:16px;
  margin:0 0 26px;
  text-wrap:pretty;
}
.offer-band { background:var(--gold2); }
.offer-inner {
  max-width:1240px;
  margin:0 auto;
  padding:clamp(26px,3vw,38px) 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
}
.offer-copy { color:var(--navy); }
.offer-date {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:12px;
}
.offer-headline {
  display:block;
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:clamp(30px,4.4vw,46px);
  line-height:1;
  margin:4px 0 8px;
}
.offer-price {
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:17px;
  margin:0;
}
.offer-old { opacity:.55; margin-right:6px; }
.offer-new { font-weight:900; font-style:italic; }
.offer-note {
  font-size:12px;
  margin:6px 0 0;
  opacity:.75;
}
.btn-navy {
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--navy);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:13px;
  padding:14px 24px;
  border-radius:11px;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, color .2s ease;
}
.btn-navy:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.24);
  color:var(--gold);
}
.join-band {
  background:#fff;
  padding:clamp(48px,6vw,80px) 22px;
}
.join-grid {
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:300px 1fr 1fr;
  gap:24px;
  align-items:stretch;
}
.join-copy {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.join-title {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  color:var(--navy);
  font-size:clamp(24px,2.6vw,30px);
  line-height:1.1;
  margin:0;
}
.join-sub {
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  color:var(--teal);
  font-size:19px;
  margin:0;
}
.join-trust {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:var(--navy);
  font-size:17px;
}
.join-quote {
  color:var(--muted);
  font-size:14.5px;
  line-height:1.5;
  margin:0;
}
.join-scroll {
  margin-top:auto;
  border:1px solid #E4EDF1;
  border-radius:8px;
  padding:12px;
  display:flex;
  justify-content:center;
  color:var(--navy);
  background:#fff;
}
.join-scroll:hover { color:var(--gold); }
@media (max-width:900px) {
  .join-grid { grid-template-columns:1fr; }
  .join-scroll { display:none; }
}
.trip-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.ta-band { background:#fff; padding:clamp(48px,6vw,72px) 22px; }
.ta-inner { max-width:1100px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ta-badge { width:260px; margin-bottom:6px; }
.ta-rating-row { display:flex; align-items:center; gap:12px; }
.ta-rating-word { font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase; color:var(--navy); font-size:18px; }
.ta-stars { color:#00AA6C; font-size:22px; letter-spacing:3px; }
.ta-stars-sm { color:#00AA6C; font-size:13px; letter-spacing:1px; }
.ta-brand { display:inline-flex; align-items:center; gap:8px; color:#00AA6C; font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px; margin-bottom:12px; }
.ta-brand:hover { color:var(--teal); }
.ta-cards { display:flex; gap:16px; overflow-x:auto; width:100%; padding:6px 2px 12px; scroll-snap-type:x mandatory; }
.ta-card { flex:0 0 260px; scroll-snap-align:start; background:#F4F7F9; border:1px solid #E4EDF1; border-radius:14px; padding:18px; text-align:left; margin:0; }
.ta-card-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ta-avatar { width:36px; height:36px; border-radius:50%; background:var(--teal2); color:#fff; font-family:'Montserrat',sans-serif; font-weight:800; display:grid; place-items:center; flex:none; }
.ta-name { font-family:'Montserrat',sans-serif; font-weight:800; color:var(--navy); font-size:14px; display:block; }
.ta-text { color:var(--muted); font-size:13.5px; margin:0; line-height:1.5; }
.why-band { position:relative; overflow:hidden; }
.why-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.why-band::after { content:''; position:absolute; inset:0; background:rgba(11,90,168,.72); }
.why-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:clamp(80px,10vw,140px) 22px; text-align:center; }
.why-heading {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  color:#fff;
  font-size:clamp(23px,3.2vw,34px);
  margin:0 0 40px;
}
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.why-item { display:flex; flex-direction:column; align-items:center; }
.why-icon {
  color:var(--navy);
  background:#fff;
  border-radius:50%;
  width:64px;
  height:64px;
  padding:16px;
  box-sizing:border-box;
  margin-bottom:16px;
}
.why-title {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  color:#fff;
  font-size:16px;
  margin:0 0 10px;
}
.why-text { color:#DCEBF7; font-size:13.5px; line-height:1.5; margin:0; }
@media (max-width:800px) {
  .why-grid { grid-template-columns:repeat(2,1fr); }
}

.trip-card {
  background:#fff;
  border:1px solid #E4EDF1;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.trip-card:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(11,60,93,.14);
}
.trip-card-media { height:230px; position:relative; }
.trip-card-body {
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.trip-meta { display:flex; gap:26px; }
.trip-meta-item { display:flex; flex-direction:column; }
.trip-meta-k {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.trip-meta-v {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:14px;
  color:var(--navy);
}
.trip-card-title {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:8px;
  font-size:19px;
  line-height:1.15;
  margin:0;
}
.trip-pin { color:var(--teal); flex:none; }
.trip-card-text {
  color:var(--muted);
  font-size:14.5px;
  margin:0;
  flex:1;
}
.trip-card-foot {
  display:flex;
  flex-direction:column;
  gap:14px;
  border-top:1px solid #EDF3F6;
  padding-top:16px;
}
.trip-foot-row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.trip-rating { display:flex; flex-direction:column; gap:4px; }
.trip-rating-label { color:var(--muted); font-size:13px; }
.trip-price { display:flex; flex-direction:column; }
.trip-price-k {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.trip-price-v {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:30px;
  line-height:1;
  color:var(--navy);
}
.trip-card-actions { display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:600px) {
  .trip-card-media { height:170px; }
  .trip-card-body { padding:16px 18px 18px; gap:10px; }
  .trip-card-text { font-size:13.5px; margin:0; }
  .trip-card-foot { gap:10px; }
  .trip-card-actions { flex-wrap:nowrap; gap:8px; }
  .trip-card-actions .btn-teal, .trip-card-actions .btn-gold { flex:1; justify-content:center; padding:11px 10px; font-size:12.5px; white-space:nowrap; }
}
.highlight-split {
  max-width:1240px;
  margin:0 auto;
  padding:clamp(44px,5.4vw,72px) 22px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(24px,3.4vw,48px);
  align-items:center;
}
.highlight-media {
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/3;
}
.highlight-kicker {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:12px;
  color:var(--teal);
}
.highlight-list {
  list-style:none;
  padding:0;
  margin:14px 0 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.highlight-item {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:var(--navy);
  font-size:clamp(19px,2.4vw,26px);
  line-height:1.1;
}
.highlight-text {
  color:var(--muted);
  font-size:15px;
  margin:0 0 8px;
}
.highlight-tagline {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:var(--orange);
  font-size:16px;
  margin:0 0 20px;
}
.highlight-actions { display:flex; gap:10px; flex-wrap:wrap; }
.reason-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.reason-card {
  background:#fff;
  border:1px solid #E4EDF1;
  border-radius:16px;
  padding:22px;
  display:flex;
  flex-direction:column;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.reason-card:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(11,60,93,.12);
}
.reason-icon { color:var(--teal2); }
.reason-title {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:var(--navy);
  font-size:14.5px;
  line-height:1.2;
  margin:14px 0 8px;
}
.reason-text {
  color:var(--muted);
  font-size:13.5px;
  margin:0;
}
.give-split {
  max-width:1240px;
  margin:0 auto;
  padding:clamp(44px,5.4vw,72px) 22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.4vw,48px);
  align-items:center;
}
.give-media {
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/3;
}
.give-title {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:var(--navy);
  font-size:clamp(21px,2.8vw,30px);
  line-height:1.1;
  margin:0 0 14px;
  text-wrap:pretty;
}
.give-text {
  color:var(--muted);
  font-size:15px;
  margin:0 0 12px;
}
.give-tagline {
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:var(--orange);
  font-size:16px;
  margin:0 0 20px;
}
.press-band {
  background:var(--gray);
  border-top:1px solid #E4EDF1;
  border-bottom:1px solid #E4EDF1;
}
.press-inner {
  max-width:1240px;
  margin:0 auto;
  padding:30px 22px;
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
  justify-content:center;
}
.press-kicker {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  color:var(--muted);
}
.press-logos {
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,42px);
  flex-wrap:wrap;
  justify-content:center;
}
.press-logo {
  height:56px;
  width:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.72;
  transition:filter .25s ease, opacity .25s ease;
}
.press-logo:hover { filter:none; opacity:1; }
.review-featured {
  background:#fff;
  border:1px solid #E4EDF1;
  border-left:4px solid var(--gold);
  border-radius:16px;
  padding:24px 26px;
  margin:0 0 18px;
  max-width:860px;
}
@media (max-width: 1079px) {
  .route-tiles { grid-template-columns:1fr 1fr; }
  .highlight-split, .give-split { grid-template-columns:1fr; }
  .trip-grid { grid-template-columns:1fr; }
}
@media (max-width: 759px) {
  .route-tiles { grid-template-columns:1fr; }
  .route-tile { min-height:240px; }
  .offer-inner { flex-direction:column; align-items:flex-start; }
  .press-inner { gap:16px; }
  .press-logo { height:28px; }
}

/* ---- Google reviews (live) ---- */
.google-reviews {
  max-width:1240px;
  margin:24px 0 0;
}
.google-reviews-head {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.google-badge {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:14px;
  color:var(--navy);
  display:inline-flex;
  gap:6px;
  align-items:baseline;
}
.google-g { font-weight:900; font-size:17px; letter-spacing:-.01em; }
.google-rating {
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
}
.google-reviews-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.google-review {
  background:#fff;
  border:1px solid #E4EDF1;
  border-radius:14px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.google-review-top {
  display:flex;
  align-items:center;
  gap:10px;
}
.google-avatar {
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
}
.google-review-who {
  display:flex;
  flex-direction:column;
  line-height:1.25;
}
.google-review-name {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:13.5px;
  color:var(--navy);
}
.google-review-date { font-size:11.5px; color:var(--muted); }
.google-review-stars { color:var(--gold); font-size:14px; letter-spacing:.06em; }
.google-review-text { color:var(--muted); font-size:14px; margin:0; }
.google-reviews-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.offers-car-section { background:var(--navy); border-top:none; }
.offers-car-section .section-heading { color:#fff; }
.offers-car { display:flex; align-items:center; gap:14px; }
.offers-car-track {
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; flex:1; padding:4px 2px;
}
.offers-car-track::-webkit-scrollbar { display:none; }
.offers-car-item {
  flex:0 0 calc(50% - 8px); scroll-snap-align:start; border-radius:16px; overflow:hidden;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.offers-car-item:hover { transform:translateY(-4px); }
.offers-car-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.offers-car-btn {
  flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:none; cursor:pointer; background:#fff; color:var(--navy);
}
@media (max-width:600px) { .offers-car-item { flex:0 0 94%; } }

.hero-arrow { display:none; }
.hero-dots { display:none; }
@media (max-width:900px) {
  .hero-split { position:relative; }
  .hero-arrow {
    display:grid; place-items:center; position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border-radius:50%; background:rgba(11,43,60,.55); color:#fff;
    border:none; cursor:pointer; z-index:5;
  }
  .hero-prev { left:10px; }
  .hero-next { right:10px; }
  .hero-dots { display:flex; justify-content:center; gap:8px; padding:14px 0; background:#fff; }
}
.hero-dot { width:8px; height:8px; border-radius:999px; background:#C3D6DF; border:none; padding:0; cursor:pointer; transition:all .25s; }
.hero-dot.is-active { width:22px; background:var(--teal); }
.offers-car-dots { display:none; }
@media (max-width:600px) {
  .offers-car-btn { display:none; }
  .offers-car-dots { display:flex; justify-content:center; gap:8px; margin-top:16px; }
  .offers-car-dot { width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.35); border:none; padding:0; cursor:pointer; transition:all .25s; }
  .offers-car-dot.is-active { width:22px; background:#fff; }
  .offers-car-img { aspect-ratio:1/1; }
}

/* ---- Reviews (sistema propio, reemplaza a Trustindex) ---- */
.rv-band .section-heading { margin-bottom:18px; }
.rv-summary {
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px 18px;
  margin:0 auto 34px;
}
.rv-source {
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid #E4EDF1; border-radius:14px;
  padding:12px 18px 12px 14px; text-decoration:none; color:var(--ink);
  box-shadow:0 6px 18px rgba(11,43,60,.06);
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.rv-source:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,43,60,.12); }
.rv-source .rv-logo { width:34px; height:34px; flex:none; }
.rv-source-body { display:flex; flex-direction:column; line-height:1.2; }
.rv-source-name { font-family:'Montserrat',sans-serif; font-weight:800; font-size:13px; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; }
.rv-source-rating { display:flex; align-items:center; gap:6px; margin-top:2px; }
.rv-source-rating strong { font-family:'Montserrat',sans-serif; font-weight:900; font-size:19px; color:var(--navy); }
.rv-source-count { font-size:12.5px; color:var(--muted); margin-top:1px; }
.rv-stars { color:var(--gold); font-size:15px; letter-spacing:.08em; line-height:1; }

.rv-car { display:flex; align-items:center; gap:14px; }
.rv-car-btn {
  flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:none; cursor:pointer; background:#fff; color:var(--navy);
  box-shadow:0 6px 16px rgba(11,43,60,.12);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.rv-car-btn:hover { background:var(--teal); color:#fff; transform:scale(1.06); }
.rv-track {
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; flex:1; padding:8px 4px 16px;
  align-items:stretch;
}
.rv-track::-webkit-scrollbar { display:none; }
.rv-card {
  flex:0 0 calc((100% - 36px) / 3); scroll-snap-align:start;
  background:#fff; border-radius:16px; padding:22px 24px 20px;
  box-shadow:0 12px 28px rgba(11,43,60,.08);
  display:flex; flex-direction:column; gap:10px; min-width:0;
}
.rv-card-head { display:flex; align-items:center; gap:12px; }
.rv-avatar {
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; background:#E4EDF1;
}
.rv-avatar-ini {
  display:grid; place-items:center; background:var(--navy); color:#fff;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px; letter-spacing:.03em;
}
.rv-who { display:flex; flex-direction:column; line-height:1.25; min-width:0; flex:1; }
.rv-name { font-family:'Montserrat',sans-serif; font-weight:800; font-size:14.5px; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-date { font-size:12px; color:var(--muted); }
.rv-badge { flex:none; }
.rv-badge .rv-logo { width:22px; height:22px; display:block; }
.rv-card .rv-stars { font-size:16px; }
.rv-text {
  color:var(--ink); font-size:14.5px; line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.rv-title { display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px; color:var(--navy); margin-bottom:4px; line-height:1.35; }
.rv-card.is-open .rv-text { display:block; -webkit-line-clamp:none; overflow:visible; }
.rv-more {
  align-self:flex-start; margin-top:auto; padding:0; border:none; background:none; cursor:pointer;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--teal);
}
.rv-more:hover { color:var(--orange); }

.rv-dots { display:flex; justify-content:center; gap:8px; margin-top:4px; min-height:8px; }
.rv-dot { width:8px; height:8px; border-radius:999px; background:rgba(11,60,93,.22); border:none; padding:0; cursor:pointer; transition:all .25s; }
.rv-dot.is-active { width:22px; background:var(--teal); }

.rv-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:32px; }
.rv-actions .btn-reviews { gap:10px; }
.rv-actions .rv-logo { width:20px; height:20px; flex:none; }
.rv-actions .rv-btn-g { background:#fff; color:var(--navy); border:1px solid #DDE6EB; }
.rv-actions .rv-btn-g:hover { color:var(--teal); }
.rv-actions .rv-btn-ta { background:#34E0A1; color:#0B2B3C; }
.rv-actions .rv-btn-ta:hover { color:#0B2B3C; }
.rv-readall { text-align:center; margin:18px 0 0; }
.rv-readall a {
  display:inline-flex; align-items:center; gap:7px; color:var(--teal); text-decoration:none;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
}
.rv-readall a:hover { color:var(--orange); }

@media (max-width:980px) {
  .rv-card { flex-basis:calc((100% - 18px) / 2); }
}
@media (max-width:640px) {
  .rv-car { gap:8px; }
  .rv-car-btn { display:none; }
  .rv-card { flex-basis:92%; padding:20px 20px 18px; }
  .rv-source { padding:10px 14px 10px 12px; }
  .rv-summary { gap:10px; margin-bottom:26px; }
  .rv-actions .btn-reviews { width:100%; justify-content:center; font-size:12px; letter-spacing:.03em; padding-left:14px; padding-right:14px; }
}

/* ---- Hero unico con video (reemplaza a los tres paneles) ---- */
.hero-video { min-height:clamp(560px,80vh,840px); display:flex; align-items:center; }
.hero-video .bg-media video { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-video .hero-overlay { background:linear-gradient(95deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.04) 100%); }
.hero-video .hero-inner { width:100%; padding:clamp(56px,9vw,120px) 22px; }
.hero-video .hero-copy { max-width:700px; }
.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;
  animation:heroRise 1.5s cubic-bezier(.22,.61,.36,1) .1s both;
}
.hero-video .hero-title { font-size:clamp(32px,4.6vw,56px); }
.hero-video .hero-subtitle { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.hero-video .hero-text { max-width:560px; font-size:clamp(14.5px,1.6vw,17px); line-height:1.55; }
.hero-video .hero-actions .btn-outline:hover { background:#fff; color:var(--navy); }
@media (max-width:640px) {
  .hero-video { min-height:0; align-items:center; } /* en mobile el alto lo da el contenido: sin aire vacio arriba */
  .hero-video .hero-overlay { background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,.78) 100%); }
  .hero-video .hero-inner { padding:60px 22px 48px; }
  .hero-video .hero-actions { flex-direction:column; }
  .hero-video .hero-actions .btn-gold, .hero-video .hero-actions .btn-outline { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { .hero-kicker { animation:none !important; } }

/* Join: el texto arriba centrado y tres tarjetas (las dos rutas + Private Experience) */
.join-grid { grid-template-columns:repeat(3,1fr); }
.join-copy { grid-column:1 / -1; text-align:center; align-items:center; max-width:820px; margin:0 auto 10px; }
@media (max-width:1000px) and (min-width:901px) { .join-grid { grid-template-columns:repeat(3,1fr); gap:16px; } }
/* la regla de 3 columnas de arriba pisaba a la de mobile del bloque tablet, por eso se repite aca */
@media (max-width:900px) { .join-grid { grid-template-columns:1fr; } .join-copy { margin-bottom:0; } }
.trip-price-v-sm { font-size:20px; font-weight:800; padding-top:6px; }
@media (max-width:640px) {
  /* en mobile las dos tarjetas van lado a lado, cada una con el logo arriba y los datos debajo */
  .rv-summary { flex-wrap:nowrap; align-items:stretch; gap:10px; }
  .rv-source { flex:1 1 0; min-width:0; flex-direction:column; align-items:flex-start; padding:14px 14px 12px; gap:8px; border-radius:16px; }
  .rv-source .rv-logo { width:40px; height:40px; }
  .rv-source-name { font-size:14px; text-transform:none; letter-spacing:0; }
  .rv-source-rating strong { font-size:22px; }
  .rv-source-rating .rv-stars { font-size:13px; letter-spacing:.04em; }
  .rv-source-count { font-size:13px; margin-top:2px; }
}

/* ---- The Island Experience: version clara, como el mockup ---- */
.island-exp { max-width:960px; padding:clamp(56px,7vw,96px) 22px clamp(52px,6.5vw,88px); }
.island-exp-logo { width:170px; margin-bottom:26px; }
.island-exp-title { font-size:clamp(26px,3.6vw,40px); margin-bottom:10px; }
.island-exp-lead { color:var(--teal); font-size:clamp(16px,2vw,24px); letter-spacing:.04em; margin-bottom:16px; }
.island-exp-text { color:var(--navy); font-size:clamp(15px,1.4vw,17px); line-height:1.5; max-width:820px; margin:0 auto 20px; }
.island-exp-tag {
  font-family:'Montserrat',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  color:var(--teal); font-size:clamp(12px,1.3vw,15px); margin:0 0 28px;
}
.btn-orange {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--orange); color:#fff; font-family:'Montserrat',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; font-size:14px; padding:14px 36px; border-radius:10px;
  box-shadow:0 8px 20px rgba(240,138,36,.32);
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, filter .22s ease;
}
.btn-orange:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.22); filter:brightness(1.06); color:#fff; }
.btn-orange:active { transform:translateY(-1px) scale(.985); }
@media (max-width:640px) { .btn-orange { width:100%; padding:15px 24px; } .island-exp .cta-row { display:block; } }
@media (prefers-reduced-motion:reduce) { .btn-orange { transition:none; } .btn-orange:hover { transform:none; } }
.join-title { text-transform:uppercase; }
.hero-video .hero-title { line-height:1.06; }
.hero-video .hero-subtitle { gap:6px 8px; }

/* ---- Choose Your Direction: tres tarjetas con el titulo sobre la foto ---- */
.dir-grid { grid-template-columns:repeat(3,1fr); gap:22px; }
.dir-grid .join-copy { margin-bottom:2px; }
.dir-card { background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 14px 34px rgba(11,43,60,.12); display:flex; flex-direction:column; }
.dir-card-media { position:relative; height:clamp(200px,17vw,236px); }
.dir-card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.dir-card-head {
  position:absolute; inset:0; padding:clamp(16px,1.8vw,22px) clamp(16px,1.9vw,24px); color:#fff;
  /* sin tinte azul: solo un oscurecido suave arriba para que se lea el titulo */
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 40%,rgba(0,0,0,0) 65%);
}
.dir-card-title { font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(20px,2.1vw,28px); line-height:1.05; margin:0 0 6px; text-shadow:0 2px 12px rgba(0,0,0,.25); }
.dir-arrow { display:inline-block; margin:0 4px; }
.dir-card-sub { font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(11.5px,1.05vw,14px); line-height:1.3; margin:0; text-shadow:0 2px 10px rgba(0,0,0,.25); }
.dir-card-body { padding:20px clamp(16px,1.9vw,24px) 24px; display:flex; flex-direction:column; gap:16px; flex:1; } /* flex:1 + el margin-top:auto de la fila alinea los botones entre tarjetas */
.dir-card-text { color:var(--navy); font-size:clamp(14.5px,1.15vw,16px); line-height:1.45; margin:0; }
.dir-card-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:auto; }
.dir-rating { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dir-rating .review-stars { font-size:18px; letter-spacing:.04em; line-height:1; }
.dir-rating-label { font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; color:var(--muted); }
.dir-price { display:flex; flex-direction:column; align-items:flex-end; line-height:1; border-left:1px solid #E4EDF1; padding-left:16px; flex:none; }
.dir-price-k { font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.dir-price-v { font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(24px,2.1vw,31px); color:var(--navy); }
.dir-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.btn-view {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:2px solid var(--teal); color:var(--teal); background:#fff;
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:13.5px; padding:13px 12px; border-radius:14px;
  transition:background .2s ease, color .2s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.btn-view:hover { background:var(--teal); color:#fff; transform:translateY(-2px); }
.dir-card-actions .btn-gold { justify-content:center; border-radius:14px; font-size:13.5px; padding:14px 12px; letter-spacing:.02em; }

/* La tercera tarjeta no tiene precio ni estrellas: en su lugar van el publico y "Custom".
   Como es texto y no un numero, va mas chico para que no desborde la columna. */
.dir-groups { text-transform:uppercase; letter-spacing:.05em; font-size:12px; color:var(--navy); }
.dir-price-custom { font-size:clamp(18px,1.6vw,24px); }
.dir-card-private .dir-card-title { white-space:normal; } /* el titulo es largo: tiene que poder cortar */

/* Entre 901 y 1100 las tres columnas quedan muy angostas para dos botones al lado:
   la fila de datos y las acciones se apilan. */
@media (min-width:901px) and (max-width:1100px) {
  .dir-card-row { flex-direction:column; align-items:flex-start; gap:10px; }
  .dir-price { flex-direction:row; align-items:baseline; gap:8px; border-left:none; padding-left:0; }
  .dir-price-k { margin-bottom:0; }
  .dir-card-actions { grid-template-columns:1fr; }
}
@media (max-width:900px) { .dir-grid { grid-template-columns:1fr; gap:22px; } }
@media (max-width:480px) {
  .dir-card-actions { gap:10px; }
  .btn-view, .dir-card-actions .btn-gold { font-size:13px; padding:13px 10px; }
  .dir-price { padding-left:14px; }
  .dir-card-title { font-size:22px; white-space:nowrap; }
  .dir-card-private .dir-card-title { white-space:normal; font-size:21px; }
  .dir-card-sub { font-size:12px; }
  .dir-price-custom { font-size:19px; }
}

/* ---- celulares angostos (320-360px): escala tipografica mas chica ---- */
@media (max-width:360px) {
  .hero-video .hero-inner { padding:48px 18px 40px; }
  .hero-kicker { font-size:10.5px; letter-spacing:.1em; margin-bottom:10px; }
  .hero-video .hero-title { font-size:27px; }
  .hero-video .hero-subtitle { font-size:14px; margin-top:12px; }
  .hero-video .hero-text { font-size:13.5px; margin-top:12px; }
  .hero-actions { margin-top:18px; gap:8px; }
  .btn-gold, .btn-teal, .btn-outline, .btn-view { font-size:12.5px; padding:12px 14px; }
  .section-inner, .island-exp, .join-band, .why-inner { padding-left:16px; padding-right:16px; }
  .island-exp { padding-top:40px; padding-bottom:40px; }
  .island-exp-logo { width:130px; margin-bottom:18px; }
  .island-exp-title { font-size:22px; }
  .island-exp-lead { font-size:14px; }
  .island-exp-text { font-size:14px; }
  .island-exp-tag { font-size:11px; letter-spacing:.14em; margin-bottom:20px; }
  .btn-orange { font-size:13px; padding:13px 20px; }
  .join-title { font-size:21px; }
  .dir-card { border-radius:16px; }
  .dir-card-media { height:200px; }
  .dir-card-head { padding:14px 16px; }
  .dir-card-title { font-size:18px; }
  .dir-card-sub { font-size:10.5px; }
  .dir-card-body { padding:16px 16px 18px; gap:14px; }
  .dir-card-text { font-size:14px; }
  .dir-rating .review-stars { font-size:17px; }
  .dir-rating-label { font-size:12px; }
  .dir-price-k { font-size:11px; }
  .dir-price-v { font-size:26px; }
  .dir-card-actions { gap:8px; }
  .btn-view, .dir-card-actions .btn-gold { font-size:12px; padding:12px 8px; gap:6px; }
  .section-heading, .why-heading { font-size:20px; margin-bottom:22px; }
  .rv-source { padding:12px 10px 10px; gap:6px; }
  .rv-source .rv-logo { width:34px; height:34px; }
  .rv-source-rating strong { font-size:19px; }
  .rv-source-rating .rv-stars { font-size:11px; }
  .rv-source-name { font-size:12.5px; }
  .rv-source-count { font-size:11.5px; }
  .rv-card { padding:16px 16px 14px; }
  .rv-name { font-size:13.5px; }
  .rv-text { font-size:13.5px; }
  .rv-actions .btn-reviews { font-size:11.5px; }
  .highlight-kicker { font-size:13px; }
  .highlight-item { font-size:15px; }
  .why-title { font-size:15px; }
  .why-text { font-size:13.5px; }
  .give-title { font-size:18px; }
  .give-text { font-size:14px; }
  .press-kicker { font-size:11px; }
  .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; }
}

/* ---- Why choose: fondo azul de siempre, 5 puntos con iconos de colores ---- */
.why-v2 .why-inner { padding:clamp(64px,8vw,110px) 22px; max-width:1240px; }
.why-v2 .why-heading { color:#fff; font-weight:900; text-transform:uppercase; font-size:clamp(26px,3.6vw,42px); line-height:1.08; margin:0 0 14px; }
.why-heading-accent { color:var(--gold); }
.why-underline { display:block; width:110px; height:6px; margin:0 auto 44px; border-radius:999px; background:var(--gold); transform:rotate(-2deg); }
.why-v2 .why-grid { grid-template-columns:repeat(5,1fr); gap:26px 22px; text-align:center; }
.why-v2 .why-item { align-items:center; }
.why-icon-wrap { display:grid; place-items:center; width:74px; height:74px; border-radius:50%; margin-bottom:16px; flex:none; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.why-icon-wrap svg { width:32px; height:32px; }
/* hover: el circulo crece y el icono un poco mas */
.why-icon-wrap { transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }
.why-icon-wrap svg { transition:transform .28s cubic-bezier(.22,.61,.36,1); }
.why-item:hover .why-icon-wrap { transform:scale(1.14); box-shadow:0 14px 30px rgba(0,0,0,.26); }
.why-item:hover .why-icon-wrap svg { transform:scale(1.12); }
@media (prefers-reduced-motion:reduce) { .why-icon-wrap, .why-icon-wrap svg { transition:none; } .why-item:hover .why-icon-wrap, .why-item:hover .why-icon-wrap svg { transform:none; } }
.why-c-yellow { background:#FFF1C2; color:#E8A400; }
.why-c-blue   { background:#DCEEFF; color:#1B7FA8; }
.why-c-green  { background:#DDF5E7; color:#1E9E5A; }
.why-c-orange { background:#FFE5CF; color:#F08A24; }
.why-c-red    { background:#FFDCE2; color:#E5394F; }
.why-v2 .why-title { color:#fff; text-transform:uppercase; font-size:15px; line-height:1.2; margin:0 0 8px; }
.why-v2 .why-text { color:#DCEBF7; font-size:14px; line-height:1.55; margin:0; }
@media (max-width:1100px) {
  .why-v2 .why-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:800px) {
  /* mobile: lista con el icono a la izquierda */
  .why-v2 .why-grid { grid-template-columns:1fr; gap:22px; text-align:left; }
  .why-v2 .why-item { flex-direction:row; align-items:flex-start; gap:16px; }
  .why-icon-wrap { width:64px; height:64px; margin-bottom:0; }
  .why-icon-wrap svg { width:28px; height:28px; }
  .why-v2 .why-title { font-size:17px; margin-bottom:4px; }
  .why-v2 .why-text { font-size:15px; }
  .why-underline { margin-bottom:30px; }
}
@media (max-width:360px) {
  .why-icon-wrap { width:54px; height:54px; }
  .why-icon-wrap svg { width:24px; height:24px; }
  .why-v2 .why-title { font-size:15px; }
  .why-v2 .why-text { font-size:13.5px; }
}

/* ---- Your trip supports: banda verde oscuro con iconos ---- */
.give-band { background:#07293F; color:#fff; }
.give-band .give-split { grid-template-columns:1.1fr 1fr; grid-template-areas:"copy media" "icons icons"; gap:clamp(24px,3.4vw,48px) clamp(28px,4vw,64px); padding-top:clamp(56px,7vw,92px); padding-bottom:clamp(48px,6vw,80px); }
.give-band .give-copy { grid-area:copy; }
.give-band .give-media { grid-area:media; border-radius:20px; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.give-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; }
.give-band .give-title { color:#fff; font-size:clamp(24px,3vw,36px); margin-bottom:16px; }
.give-accent { color:var(--gold); }
.give-band .give-text { color:#CFE2F0; font-size:clamp(15px,1.3vw,17px); line-height:1.5; margin:0 0 22px; max-width:520px; }
.give-icons { grid-area:icons; list-style:none; margin:0; padding:clamp(22px,3vw,34px) 0 0; border-top:1px solid rgba(255,255,255,.14); display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.give-icon-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.give-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; }
.give-icon-item:hover .give-icon { transform:scale(1.12); background:var(--gold); color:#07293F; }
.give-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) {
  .give-band .give-split { grid-template-columns:1fr; grid-template-areas:"copy" "media" "icons"; }
  .give-band .give-copy { text-align:center; }
  .give-band .give-text { max-width:none; }
  .give-band .give-media { width:100%; max-width:560px; margin:0 auto; }
}
@media (max-width:640px) {
  .give-icons { grid-template-columns:repeat(4,1fr); gap:10px; }
  .give-icon { width:54px; height:54px; }
  .give-icon svg { width:22px; height:22px; }
  .give-icon-label { font-size:10.5px; letter-spacing:.02em; }
  .give-band .give-media { border-radius:16px; }
}
@media (prefers-reduced-motion:reduce) { .give-icon { transition:none; } .give-icon-item:hover .give-icon { transform:none; } }

/* ---- Why choose: version clara final (sin foto de fondo), iconos de colores y tagline manuscrita ---- */
.why-clean { background:#F6FAFD; }
.why-clean::after { display:none; }
.why-clean .why-heading { color:var(--navy); }
.why-clean .why-heading-accent { color:var(--teal); }
.why-clean .why-title { color:var(--navy); }
.why-clean .why-text { color:#4a5a63; }
.why-clean .why-icon-wrap { box-shadow:0 8px 20px rgba(11,43,60,.10); }
.why-clean .why-item:hover .why-icon-wrap { box-shadow:0 14px 30px rgba(11,43,60,.18); }

/* ---- Ofertas: tarjetas de colores (reemplaza al carrusel de imagenes) ---- */
.offers-band { background:#F6FAFD; }
.offers-heading { margin-bottom:8px; }
.offers-sub { text-align:center; color:var(--teal); font-size:clamp(15px,1.4vw,18px); margin:0 auto 34px; max-width:520px; }
.offers-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:880px; margin:0 auto; }
.offer-tile {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:26px 18px 24px; border-radius:20px; text-decoration:none; color:var(--navy);
  box-shadow:0 10px 26px rgba(11,43,60,.08);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.offer-tile:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(11,43,60,.14); }
.offer-tile-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.75); margin-bottom:4px; }
.offer-tile-name { font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px; line-height:1.25; }
.offer-tile-amount { font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(24px,2.4vw,30px); line-height:1; }
.offer-tile-amount { white-space:nowrap; }
.offer-tile-amount small { display:block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }
.offer-tile-desc { color:#3f4f58; font-size:13.5px; line-height:1.4; }
.offer-tile-red    { background:#FDE7E9; } .offer-tile-red .offer-tile-icon,    .offer-tile-red .offer-tile-amount    { color:#E5394F; }
.offer-tile-yellow { background:#FFF3C7; } .offer-tile-yellow .offer-tile-icon, .offer-tile-yellow .offer-tile-amount { color:#E8A400; }
.offer-tile-blue   { background:#DCEEFF; } .offer-tile-blue .offer-tile-icon,   .offer-tile-blue .offer-tile-amount   { color:#1B7FA8; }
.offer-tile-green  { background:#DDF5E7; } .offer-tile-green .offer-tile-icon,  .offer-tile-green .offer-tile-amount  { color:#1E9E5A; }
.offers-cta { justify-content:center; margin-top:30px; }
.offers-cta .btn-view { border-color:var(--navy); color:var(--navy); background:transparent; }
.offers-cta .btn-view:hover { background:var(--navy); color:#fff; }
@media (max-width:900px) { .offers-grid { grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width:640px) {
  .offer-tile { padding:20px 14px 18px; border-radius:16px; gap:6px; }
  .offer-tile-icon { width:44px; height:44px; }
  .offer-tile-name { font-size:13px; }
  .offer-tile-amount { font-size:22px; }
  .offer-tile-desc { font-size:12.5px; }
  .offers-cta .btn-view { width:100%; }
}
@media (max-width:360px) {
  .offers-grid { gap:10px; }
  .offer-tile { padding:16px 10px 14px; }
  .offer-tile-name { font-size:12px; }
  .offer-tile-amount { font-size:19px; }
  .offer-tile-desc { font-size:11.5px; }
}
@media (prefers-reduced-motion:reduce) { .offer-tile { transition:none; } .offer-tile:hover { transform:none; } }

/* ---- 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; } }

/* ---- Why choose: barra de confianza debajo de los 5 puntos ---- */
.why-trust { list-style:none; margin:clamp(44px,5vw,68px) 0 0; padding:clamp(26px,3vw,34px) 0 0; border-top:1px solid #DDE8EF; display:grid; grid-template-columns:repeat(5,1fr); gap:18px 0; text-align:left; }
.why-trust-item { display:flex; align-items:flex-start; gap:12px; padding:2px clamp(12px,1.6vw,22px); }
.why-trust-item + .why-trust-item { border-left:1px solid #DDE8EF; }
.why-trust-icon { flex:none; display:grid; place-items:center; width:36px; height:36px; color:var(--navy); }
.why-trust-icon svg { width:24px; height:24px; }
.why-trust-title { font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; font-size:11.5px; letter-spacing:.02em; line-height:1.25; color:var(--navy); margin:0 0 4px; }
.why-trust-text { font-size:12px; line-height:1.45; color:#4a5a63; margin:0; }
@media (max-width:1100px) {
  .why-trust { grid-template-columns:repeat(3,1fr); gap:24px 0; }
  .why-trust-item:nth-child(3n+1) { border-left:0; }
}
@media (max-width:640px) {
  .why-trust { grid-template-columns:repeat(2,1fr); gap:20px 16px; }
  .why-trust-item { border-left:0 !important; padding:0; }
  .why-trust-icon { width:34px; height:34px; }
  .why-trust-icon svg { width:22px; height:22px; }
  .why-trust-title { font-size:11px; }
  .why-trust-text { font-size:11.5px; }
}
@media (max-width:360px) {
  .why-trust { grid-template-columns:1fr; }
}

/* ---- Trip highlights: mosaico de fotos con epigrafe ---- */
.hl-band .section-heading { margin-bottom:6px; }
.hl-sub { text-align:center; color:var(--muted); font-size:clamp(15px,1.4vw,18px); margin:0 auto 34px; max-width:560px; }
.hl-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(210px,20vw,270px); gap:18px; max-width:1180px; margin:0 auto; }
.hl-card { position:relative; overflow:hidden; border-radius:18px; box-shadow:0 12px 30px rgba(11,43,60,.14); }
.hl-card-wide { grid-column:span 2; }
.hl-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.hl-card:hover .hl-img { transform:scale(1.06); }
.hl-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,43,60,0) 42%,rgba(11,43,60,.72) 100%); }
.hl-caption { position:absolute; left:20px; right:20px; bottom:18px; color:#fff; font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(15px,1.4vw,18px); line-height:1.25; text-shadow:0 2px 12px rgba(0,0,0,.45); text-wrap:pretty; }
/* placeholder mientras no haya foto */
.hl-card-ph { background:linear-gradient(140deg,#1B7FA8 0%,#0B3C5D 100%); }
.hl-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:rgba(255,255,255,.72); }
.hl-ph-t { font-family:'Montserrat',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; }
@media (max-width:900px) {
  .hl-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:190px; gap:14px; }
  .hl-card-wide { grid-column:span 2; }
}
@media (max-width:700px) {
  .hl-grid { grid-template-columns:1fr; grid-auto-rows:180px; gap:14px; }
  .hl-card-wide { grid-column:auto; }
  .hl-caption { left:16px; right:16px; bottom:15px; font-size:16px; }
  .hl-sub { margin-bottom:24px; }
}
@media (prefers-reduced-motion:reduce) { .hl-img { transition:none; } .hl-card:hover .hl-img { transform:none; } }

/* ---- 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); }

/* ---- Recommended by: bloque mas grande ---- */
.press-inner { padding:clamp(40px,4.6vw,62px) 22px; gap:clamp(22px,3vw,44px); }
.press-kicker { font-size:14px; letter-spacing:.14em; color:var(--navy); }
.press-logos { gap:clamp(26px,4vw,60px); }
.press-logo { height:clamp(64px,7vw,88px); opacity:.85; }
@media (max-width:640px) { .press-inner { padding:34px 18px; gap:18px; } .press-logo { height:54px; } .press-kicker { font-size:12.5px; } }

/* ---- 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; }
}

/* ---- "Choose your direction": en mobile no se muestra (el hero queda con Book Now solo) ---- */
@media (max-width:640px) {
  .hero-video .hero-actions .btn-outline { display:none; }
}

/* ---- The Island Experience ya no lleva boton: se cierra el aire con Choose your direction ---- */
.island-exp { padding-bottom:clamp(24px,2.6vw,34px); }
.island-exp-tag { margin-bottom:0; }
.band-navy + .join-band { padding-top:clamp(28px,3vw,40px); }

/* ---- 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; } }

/* ---- En mobile los highlights y la barra de confianza se deslizan de a uno ---- */
.hl-dots, .why-trust-dots { display:none; justify-content:center; gap:8px; }
.hl-dots button, .why-trust-dots button {
  width:8px; height:8px; border-radius:999px; background:rgba(11,60,93,.22);
  border:none; padding:0; cursor:pointer; transition:width .25s ease, background .25s ease;
}
.hl-dots button.is-active, .why-trust-dots button.is-active { width:22px; background:var(--teal); }

@media (max-width:700px) {
  .hl-grid {
    display:flex; grid-auto-rows:auto; gap:12px; max-width:none;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none; padding:2px 2px 8px;
  }
  .hl-grid::-webkit-scrollbar { display:none; }
  .hl-card, .hl-card-wide { flex:0 0 86%; height:200px; scroll-snap-align:start; }
  .hl-dots { display:flex; margin-top:12px; }
}

@media (max-width:640px) {
  .why-trust {
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none;
    padding:clamp(26px,3vw,34px) 2px 8px;
  }
  .why-trust::-webkit-scrollbar { display:none; }
  .why-trust-item { flex:0 0 78%; scroll-snap-align:start; }
  .why-trust-dots { display:flex; margin-top:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .hl-dots button, .why-trust-dots button { transition:none; }
}

/* ---- En mobile los logos de prensa se deslizan en vez de apilarse ---- */
@media (max-width:640px) {
  .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; scroll-snap-align:center; }
}

/* ---- El titulo del hero, un poco mas chico ---- */
.hero-video .hero-title { font-size:clamp(28px,4vw,48px); }
@media (max-width:640px) { .hero .hero-title { font-size:clamp(22px,6.6vw,27px); } }
@media (max-width:360px) { .hero-video .hero-title { font-size:23px; } }

/* ---- Queda una sola oferta: ocupa el ancho que tenian las dos juntas ---- */
.offers-grid { grid-template-columns:1fr; }
@media (max-width:900px) { .offers-grid { grid-template-columns:1fr; } }

/* ---- Al quedar sola, la oferta se agranda para llenar la tarjeta ---- */
.offer-tile { padding:38px 28px 34px; gap:10px; }
.offer-tile-icon { width:68px; height:68px; margin-bottom:6px; }
.offer-tile-icon svg { width:32px; height:32px; }
.offer-tile-name { font-size:clamp(17px,1.9vw,22px); letter-spacing:.01em; }
.offer-tile-amount { font-size:clamp(38px,4.6vw,56px); }
.offer-tile-amount small { font-size:14px; margin-bottom:5px; }
.offer-tile-desc { font-size:clamp(14px,1.4vw,16.5px); }
@media (max-width:640px) {
  .offer-tile { padding:28px 18px 26px; gap:8px; }
  .offer-tile-icon { width:56px; height:56px; }
  .offer-tile-icon svg { width:28px; height:28px; }
  .offer-tile-name { font-size:16px; }
  .offer-tile-amount { font-size:34px; }
  .offer-tile-desc { font-size:14px; }
}
@media (max-width:360px) {
  .offer-tile { padding:24px 14px 22px; }
  .offer-tile-name { font-size:15px; }
  .offer-tile-amount { font-size:30px; }
  .offer-tile-desc { font-size:13px; }
}

/* ---- El codigo de descuento va como etiqueta, estilo cupon ---- */
.offer-tile-code {
  display:inline-block; margin-top:6px; padding:8px 20px; border-radius:999px;
  background:#fff; border:2px dashed currentColor;
  font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase;
  letter-spacing:.14em; font-size:clamp(14px,1.4vw,17px); line-height:1;
}
.offer-tile-red .offer-tile-code    { color:#E5394F; }
.offer-tile-yellow .offer-tile-code { color:#E8A400; }
.offer-tile-blue .offer-tile-code   { color:#1B7FA8; }
.offer-tile-green .offer-tile-code  { color:#1E9E5A; }
@media (max-width:640px) {
  .offer-tile-code { padding:7px 16px; font-size:13.5px; letter-spacing:.12em; }
}

/* ---- Los titulos van en Anton: display, pesada y condensada ----
   Anton tiene un solo peso (400). Si se le pide 700 el navegador inventa la
   negrita y los trazos salen sucios, asi que todas van en 400.
   Botones, etiquetas, pills, precios y kickers siguen en Montserrat. */
.hero-title,
.island-exp-title,
.join-title,
.dir-card-title,
.section-heading,
.why-heading,
.why-title,
.give-title,
.cta-title {
  font-family:'Anton', Impact, sans-serif;
  /* el hero y las tarjetas traian letter-spacing de cuando eran Montserrat */
  letter-spacing:normal;
}
.hero-title, .island-exp-title, .join-title, .dir-card-title,
.section-heading, .why-heading, .why-v2 .why-heading,
.why-title, .why-v2 .why-title,
.give-title, .cta-title, .cta-v2 .cta-title { font-weight:400; }

/* ---- Los titulos, un poco mas grandes ----
   Anton es condensada: con el mismo cuerpo ocupaba bastante menos que Montserrat.
   Las medidas de mobile se repiten aca porque este bloque va al final del archivo
   y, si no, pisaria a los @media de arriba (tienen la misma especificidad). */
.hero-video .hero-title { font-size:clamp(30px,4.8vw,58px); }
.island-exp-title { font-size:clamp(28px,4.2vw,46px); }
.join-title { font-size:clamp(26px,3.4vw,40px); }
.dir-card-title { font-size:clamp(32px,3.6vw,46px); }
.section-heading { font-size:clamp(26px,3.8vw,40px); }
.why-v2 .why-heading { font-size:clamp(28px,4.2vw,48px); }
.why-v2 .why-title { font-size:17px; }
.give-band .give-title { font-size:clamp(26px,3.5vw,42px); }
.cta-v2 .cta-title { font-size:clamp(30px,5vw,64px); }
@media (max-width:800px) { .why-v2 .why-title { font-size:19px; } }
@media (max-width:640px) { .hero .hero-title { font-size:clamp(25px,7.6vw,31px); } }
@media (max-width:480px) { .dir-card-title { font-size:34px; } }
@media (max-width:360px) {
  .hero-video .hero-title { font-size:26px; }
  .island-exp-title { font-size:25px; }
  .join-title { font-size:24px; }
  .dir-card-title { font-size:29px; }
  .section-heading { font-size:24px; }
  .why-v2 .why-heading { font-size:26px; }
  .why-v2 .why-title { font-size:17px; }
  .give-band .give-title { font-size:24px; }
  .cta-v2 .cta-title { font-size:25px; }
}

/* ---- Header transparente sobre el hero ----
   Solo en las paginas que lo piden ($SBA_HEADER_TRANSPARENTE antes del include):
   el header deja de ocupar lugar y el hero arranca pegado arriba. Al bajar
   aparece el fondo de la barra y 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);
}
/* En desktop el hero es alto y el texto va centrado: queda bien abajo de la barra.
   En mobile lo define el contenido, asi que ahi se le suma el alto del header. */
@media (max-width:640px) {
  /* ~ y no +: entre el header y el hero quedo el script que marca el scroll */
.header-over ~ .hero .hero-inner { padding-top:120px; }
}
@media (prefers-reduced-motion:reduce) {
  .header-over .nav-bar, .header-over .promo-bar { transition:none; }
}

/* ---- El hero ocupa el alto completo de la pantalla ----
   svh antes que vh: en mobile la barra del navegador tapa parte del 100vh y el
   contenido quedaba cortado. El vh queda primero como respaldo. */
.hero-video { min-height:100vh; min-height:100svh; }

/* ---- Hero: titulo grande con la segunda linea calada y los datos abajo ----
   El titulo ocupa el ancho util, el kicker va arriba y abajo quedan la linea de
   texto a la izquierda y los botones a la derecha. */
.hero-video .hero-copy { max-width:none; }
.hero-video .hero-inner {
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(24px,4vh,56px);
  padding-top:clamp(132px,15vh,200px);
  padding-bottom:clamp(34px,6vh,70px);
}
.hero-video .hero-title { font-size:clamp(38px,7.4vw,104px); line-height:.94; margin:0; }
/* la segunda linea va calada: solo el contorno. Si el navegador no soporta el
   trazo se queda llena, que es como estaba antes. */
.hero-title-line { display:block; color:#fff; }
@supports (-webkit-text-stroke: 2px #fff) {
  .hero-title-line {
    color:transparent;
    -webkit-text-stroke:clamp(1.4px,.2vw,2.6px) #fff;
    text-shadow:none;
  }
}
.hero-video .hero-kicker { margin-bottom:clamp(8px,1.4vh,16px); }
.hero-foot {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px clamp(28px,4vw,64px); flex-wrap:wrap;
}
.hero-foot-text {
  max-width:520px; margin:0; color:#fff;
  font-size:clamp(15px,1.3vw,18px); line-height:1.5;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.hero-foot-text .accent-gold { font-weight:700; }
.hero-video .hero-foot .hero-actions { margin:0; flex:none; }
@media (max-width:900px) {
  .hero-foot { align-items:flex-start; }
  .hero-foot-text { max-width:none; }
}
@media (max-width:640px) {
  .hero-video .hero-inner { padding-top:124px; padding-bottom:40px; gap:26px; }
  .hero-video .hero-title { font-size:clamp(32px,9.4vw,44px); }
  .hero-video .hero-foot .hero-actions { width:100%; }
}

/* El inner tiene que ocupar todo el alto para que los datos queden pegados abajo:
   con align-items:center solo medía lo que mide su contenido. */
.hero-video { align-items:stretch; }
.hero-video .hero-inner { display:flex; }
/* Dos capas: la vertical oscurece arriba (el header va transparente encima) y
   abajo (ahi va el texto calado y la linea de datos); la diagonal es la de antes. */
.hero-video .hero-overlay {
  background:
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 34%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.62) 100%),
    linear-gradient(95deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.04) 100%);
}

/* La linea de datos entraba justa y cortaba en "- 5 / day": un poco mas de ancho
   y text-wrap:pretty la reparten mejor. Los botones siguen entrando al lado. */
.hero-foot-text { max-width:600px; text-wrap:pretty; }

/* ---- Kicker de pincel y todo el contenido junto en el medio ---- */
.hero-video .hero-kicker {
  font-family:'Permanent Marker',cursive;
  text-transform:none;
  letter-spacing:0;
  font-size:clamp(20px,2.2vw,30px);
  line-height:1.1;
  /* el kicker tiene la animacion heroRise, que termina en transform:none:
     cualquier rotacion de aca la pisaria, asi que va derecho */
}
/* El titulo arriba y los datos abajo quedaban demasiado lejos: ahora van juntos,
   centrados en el alto del hero. */
.hero-video .hero-inner {
  justify-content:center;
  gap:clamp(20px,3vh,38px);
  padding-top:clamp(110px,13vh,150px);
  padding-bottom:clamp(40px,7vh,80px);
}
/* Vuelve el overlay diagonal solo, sin la banda oscura de arriba y abajo */
.hero-video .hero-overlay {
  background:linear-gradient(95deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.04) 100%);
}
@media (max-width:640px) {
  .hero-video .hero-inner { padding-top:118px; padding-bottom:48px; gap:22px; }
  .hero-video .hero-kicker { font-size:21px; }
}

/* ---- El hero sin capa encima: el video se ve tal cual ---- */
.hero-video .hero-overlay { background:none; }
/* Sin esa capa el texto se apoya solo en su sombra. En el calado va un
   drop-shadow y no un text-shadow: el drop-shadow sigue el trazo, mientras que
   el text-shadow dibujaria la silueta rellena de la letra. */
@supports (-webkit-text-stroke: 2px #fff) {
  .hero-title-line { filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
}
.hero-video .hero-kicker { text-shadow:0 2px 14px rgba(0,0,0,.55); }
/* Los botones pasan debajo del texto */
.hero-foot {
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(16px,2.4vh,26px);
}
.hero-foot-text { max-width:620px; }

/* Sobre la arena clara la linea de datos se perdia. Sin fondo, lo unico que
   queda es reforzarle la sombra: una corta que define el borde y una larga
   que la separa de la foto. */
.hero-foot-text { text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.6); }

/* ---- El titulo del hero, mas grande ----
   "Island Adventure" es bastante mas corto que lo que habia, asi que entra en
   una linea con mucho mas cuerpo sin tocar los bordes. */
.hero-video .hero-title { font-size:clamp(46px,12.2vw,168px); }
@media (max-width:640px) { .hero-video .hero-title { font-size:clamp(36px,11vw,54px); } }
@media (max-width:360px) { .hero-video .hero-title { font-size:34px; } }

/* ---- El hero arranca donde arranca el logo ----
   La barra del header usa un contenedor de 1400 y el hero uno de 1240, asi que
   el texto quedaba 21px mas adentro que el logo. El hero copia el contenedor
   de la barra, incluido el padding mas chico de las dos franjas donde el header
   lo achica para que el menu entre en una linea. */
.hero-video .hero-inner { max-width:1400px; padding-left:22px; padding-right:22px; }
@media (min-width:1200px) and (max-width:1339px) {
  .hero-video .hero-inner { padding-left:14px; padding-right:14px; }
}
@media (max-width:360px) {
  .hero-video .hero-inner { padding-left:14px; padding-right:14px; }
}

/* ---- El titulo de la seccion de la experiencia, a 66px ----
   66px es el tope: de 1270px de ancho para arriba mide exactamente eso, y mas
   abajo escala para que la frase no se desarme en pantallas chicas. */
.island-exp-title { font-size:clamp(30px,5vw,64px); }
@media (max-width:360px) { .island-exp-title { font-size:28px; } }

/* 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%);
}

/* ── Testimonio a pantalla completa, justo antes de las resenas ─────────── */
.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.4vw,96px); 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; }
}

/* ── Resenas: el titulo va a la izquierda y las dos tarjetas a la derecha ─ */
.rv-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(22px,3.6vw,54px); margin-bottom:clamp(26px,3vw,40px);
}
.rv-head .section-heading {
  margin:0; text-align:left; flex:1 1 auto; max-width:660px;
  font-size:clamp(26px,3.6vw,40px);
}
.rv-head .rv-summary { margin:0; flex:0 0 auto; justify-content:flex-end; }
@media (max-width:900px) {
  .rv-head { flex-direction:column; align-items:stretch; gap:20px; margin-bottom:26px; }
  .rv-head .section-heading { text-align:center; max-width:none; }
  .rv-head .rv-summary { justify-content:center; }
}

/* ── Resenas: ancho igual al del header y sombras sin recortar ─────────── */
.rv-band .section-inner { max-width:1400px; }
/* El track recorta lo que se sale. Con una sombra de 28px se colaba el borde
   de la sombra de la tarjeta siguiente y quedaba una linea gris abajo: ahora
   la sombra es mas corta que el hueco entre tarjetas y el padding que la deja
   entrar se compensa con margen negativo, asi no se mueve nada de lugar. */
.rv-card { box-shadow:0 8px 16px rgba(11,43,60,.09); flex:0 0 calc((100% - 72px) / 3); }
.rv-track { gap:36px; padding:10px 16px 28px; margin:-10px -16px -28px; }
@media (max-width:980px) { .rv-card { flex:0 0 calc((100% - 36px) / 2); } }
@media (max-width:640px) {
  .rv-card { flex:0 0 92%; }
  .rv-track { gap:16px; padding:8px 10px 24px; margin:-8px -10px -24px; }
}
/* El snap pegaba la tarjeta al borde del track y se comia el padding de la
   izquierda (quedaba scrollLeft=16), asi que el snapport tambien se corre. */
.rv-track { scroll-padding:0 16px; }
@media (max-width:640px) { .rv-track { scroll-padding:0 10px; } }
/* El margen negativo del track dejo los dots pegados a las tarjetas. */
.rv-dots { margin-top:26px; }
@media (max-width:640px) { .rv-dots { margin-top:20px; } }

/* ── Why Choose: bajada chica arriba y el titulo en dos tamanos ────────── */
.why-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;
}
.why-v2 .why-heading { font-size:clamp(42px,7vw,96px); line-height:.98; margin:0 0 clamp(30px,3.4vw,48px); }
.why-heading-sm { display:inline-block; font-size:.62em; }
@media (max-width:800px) { .why-v2 .why-heading { margin-bottom:30px; } }
@media (max-width:640px) {
  .why-kicker { font-size:10.5px; letter-spacing:.1em; margin-bottom:12px; }
  .why-v2 .why-heading { font-size:clamp(36px,11.4vw,62px); }
}
@media (max-width:360px) { .why-v2 .why-heading { font-size:38px; } }
/* Permanent Marker tiene un solo peso: el 800 que heredaba de .hero-kicker le
   metia negrita sintetica y se veia pastosa. Los otros textos de pincel del
   sitio (dir-kicker, quote-brush) ya van en 400. */
.hero-video .hero-kicker { font-weight:400; }

/* ── Hero: titulo en tres renglones y el precio solo ───────────────────── */
/* 140 y no 168: con tres renglones el hero no entraba en pantallas bajas. */
.hero-video .hero-title { font-size:clamp(46px,12.2vw,140px); }
@media (max-width:640px) { .hero-video .hero-title { font-size:clamp(36px,11vw,54px); } }
@media (max-width:360px) { .hero-video .hero-title { font-size:34px; } }
.hero-foot-price { display:block; font-weight:800; font-size:2em; line-height:1.08; margin-top:2px; }

/* ── Choose Your Direction: ajustes al volver al diseno anterior ───────── */
/* Los titulos ahora son Anton, que con el mismo cuerpo ocupa mucho mas que
   la Montserrat que habia cuando se armo esta tarjeta. */
.dir-card-title { font-size:clamp(24px,2.6vw,34px); }
@media (max-width:480px) { .dir-card-title { font-size:24px; } }
@media (max-width:360px) { .dir-card-title { font-size:21px; } }
/* "Custom" con el mismo cuerpo que los precios, como lo pediste en su momento */
.dir-price-custom { font-size:clamp(24px,2.1vw,31px); }
@media (max-width:480px) { .dir-price-custom { font-size:24px; } }
@media (max-width:360px) { .dir-price-custom { font-size:26px; } }
/* y el zoom de la foto al pasar el cursor, que tambien venia del otro diseno */
.dir-card-media { overflow:hidden; }
.dir-card-media img { transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.dir-card:hover .dir-card-media img,
.dir-card:focus-within .dir-card-media img { transform:scale(1.07); }
@media (prefers-reduced-motion:reduce) {
  .dir-card-media img { transition:none; }
  .dir-card:hover .dir-card-media img,
  .dir-card:focus-within .dir-card-media img { transform:none; }
}
/* el precio del hero en Anton */
.hero-foot-price { font-family:'Anton', Impact, sans-serif; font-weight:400; letter-spacing:normal; }

/* ── Travel With Purpose: fondo teal y todo el texto en navy ───────────── */
/* El navy que era fondo pasa a ser la tinta, y el teal de marca al fondo.
   Uso el #07293F y no var(--navy) porque sobre el teal2 el mas oscuro es el
   unico que pasa contraste con el cuerpo de texto. */
.give-band { background:var(--teal2); color:#07293F; }
.give-kicker { color:#07293F; }
.give-band .give-title { color:#07293F; font-size:clamp(30px,4.6vw,64px); line-height:1.02; margin-bottom:20px; }
/* el dorado del acento se apagaba contra el teal: el titulo va todo en navy */
.give-accent { color:#07293F; }
.give-band .give-text { color:#fff; font-size:clamp(15px,1.3vw,17px); line-height:1.5; max-width:560px; }
.give-icons { border-top-color:rgba(7,41,63,.22); }
.give-icon { border-color:#07293F; color:#07293F; background:rgba(255,255,255,.16); }
.give-icon-item:hover .give-icon { background:#07293F; color:var(--teal2); }
.give-icon-label { color:#07293F; }
@media (max-width:640px) { .give-band .give-title { font-size:clamp(28px,8.4vw,40px); } }
@media (max-width:360px) { .give-band .give-title { font-size:26px; } }
/* el dorado sobre el teal gritaba: el boton toma la misma tinta de la banda */
.give-band .btn-gold { background:#07293F; color:#fff; }
.give-band .btn-gold:hover { background:#fff; color:#07293F; }

/* ── Travel With Purpose: la fila de iconos pasa a pastillas claras ────── */
.give-icons {
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  border-top:1px solid rgba(7,41,63,.22); padding:clamp(22px,3vw,34px) 0 0; margin:0;
  list-style:none; grid-template-columns:none;
}
.give-pill {
  /* las cuatro se reparten el ancho en partes iguales en vez de quedar
     apretadas al medio con aire a los costados */
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:11px;
  background:#F6FAFD; border:2px solid #07293F; border-radius:16px;
  padding:12px 18px 12px 13px;
}
.give-pill-ico {
  flex:none; display:grid; place-items:center; width:40px; height:40px;
  border-radius:12px; background:rgba(7,41,63,.09); color:#07293F;
}
.give-pill-t {
  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 */
  .give-pill { flex:1 1 calc(50% - 6px); justify-content:flex-start; }
}
@media (max-width:480px) { .give-pill { flex:1 1 100%; } }
@media (max-width:640px) {
  .give-icons { gap:10px; }
  .give-pill { padding:10px 14px 10px 10px; border-radius:14px; gap:9px; }
  .give-pill-ico { width:34px; height:34px; border-radius:10px; }
  .give-pill-ico svg { width:18px; height:18px; }
  .give-pill-t { font-size:15.5px; }
}

/* ── Why Choose: sexto punto y carrusel de a tres en mobile ────────────── */
.why-c-teal { background:#D5F2F6; color:#12889A; }
/* con seis puntos, cinco columnas dejaban uno colgando: van de a tres */
.why-v2 .why-grid { grid-template-columns:repeat(3,1fr); }
.why-dots { display:none; justify-content:center; gap:8px; }
.why-dots button {
  width:8px; height:8px; border-radius:999px; background:rgba(11,60,93,.22);
  border:none; padding:0; cursor:pointer; transition:width .25s ease, background .25s ease;
}
.why-dots button.is-active { width:22px; background:var(--teal); }
@media (max-width:800px) {
  /* el flujo por columnas apila de a tres y cada columna ocupa el ancho entero,
     asi que cada deslizada pasa tres puntos */
  .why-v2 .why-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:22px 0; padding-bottom:2px;
  }
  .why-v2 .why-grid::-webkit-scrollbar { display:none; }
  .why-v2 .why-item { scroll-snap-align:start; }
  .why-dots { display:flex; margin-top:16px; }
}
@media (prefers-reduced-motion:reduce) { .why-dots button { transition:none; } }

/* ── Why Choose en oscuro y cada punto como tarjeta ────────────────────── */
.why-clean { background:#07293F; }
.why-clean .why-heading { color:#fff; }
.why-clean .why-heading-accent { color:var(--teal2); }
/* la tarjeta: icono cuadrado a la izquierda, titulo y bajada a la derecha */
.why-v2 .why-grid { gap:14px; }
.why-v2 .why-item {
  flex-direction:row; align-items:center; gap:16px; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  border-radius:16px; padding:15px 18px;
}
.why-icon-wrap { width:56px; height:56px; border-radius:14px; margin-bottom:0; box-shadow:none; }
.why-icon-wrap svg { width:26px; height:26px; }
.why-item:hover .why-icon-wrap { transform:scale(1.06); box-shadow:none; }
/* sobre el navy los tonos pastel se apagaban: el color pasa al fondo de la
   placa y el icono queda en blanco */
.why-c-yellow { background:#E8A400; color:#fff; }
.why-c-blue   { background:#1B7FA8; color:#fff; }
.why-c-green  { background:#1E9E5A; color:#fff; }
.why-c-orange { background:#F08A24; color:#fff; }
.why-c-red    { background:#E5394F; color:#fff; }
.why-c-teal   { background:#12889A; color:#fff; }
.why-clean .why-title { color:#fff; font-size:19px; margin:0 0 4px; }
.why-clean .why-text { color:#A9C3D4; font-size:13.5px; line-height:1.45; }
/* la barra de confianza, del mismo lado oscuro */
.why-trust { border-top-color:rgba(255,255,255,.16); }
.why-trust-item + .why-trust-item { border-left-color:rgba(255,255,255,.16); }
.why-clean .why-trust-icon { color:var(--teal2); }
.why-clean .why-trust-title { color:#fff; }
.why-clean .why-trust-text { color:#A9C3D4; }
.why-dots button { background:rgba(255,255,255,.26); }
.why-dots button.is-active { background:var(--teal2); }
.why-trust-dots button { background:rgba(255,255,255,.26); }
.why-trust-dots button.is-active { background:var(--teal2); }
@media (max-width:800px) {
  .why-v2 .why-item { align-items:center; padding:14px 16px; }
  .why-clean .why-title { font-size:18px; }
  .why-clean .why-text { font-size:13.5px; }
}
@media (max-width:360px) {
  .why-icon-wrap { width:48px; height:48px; border-radius:12px; }
  .why-icon-wrap svg { width:22px; height:22px; }
  .why-clean .why-title { font-size:16.5px; }
}

/* ── Who's it for: tarjeta clara sobre la foto ─────────────────────────── */
.wf-band { position:relative; overflow:hidden; }
.wf-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
/* la foto es clarisima: un velo parejo para que la tarjeta se despegue */
.wf-band::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,41,63,.24) 0%,rgba(7,41,63,.46) 100%); }
.wf-inner {
  position:relative; z-index:1; max-width:1240px; margin:0 auto;
  padding:clamp(70px,9vw,120px) 22px; display:flex; justify-content:center;
}
.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); max-width:720px;
}
.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;
}
@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; }
}

/* ── Who's it for en dos columnas ──────────────────────────────────────── */
/* el velo sube un poco: ahora hay texto blanco apoyado sobre la foto */
.wf-band::after { background:linear-gradient(180deg,rgba(7,41,63,.42) 0%,rgba(7,41,63,.58) 100%); }
.wf-inner {
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center;
  gap:clamp(28px,4vw,64px); justify-content:initial;
}
.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;
}
.wf-line {
  font-family:'Permanent Marker',cursive; color:var(--gold);
  font-size:clamp(22px,2.4vw,32px); line-height:1.15; margin:0 0 24px;
}
.wf-card { max-width:none; justify-self:end; }
@media (max-width:900px) {
  .wf-inner { grid-template-columns:1fr; gap:26px; }
  .wf-card { justify-self:stretch; }
}
@media (max-width:640px) {
  .wf-title { font-size:clamp(27px,8vw,40px); }
  .wf-line { font-size:22px; margin-bottom:20px; }
}

/* ── 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 ──────────────────── */
/* El trazo iba por vw y abajo de 700px quedaba clavado en 1.4px: contra un
   titulo de 39px es casi el doble de grueso, en proporcion, que en desktop. */
@media (max-width:900px) {
  @supports (-webkit-text-stroke: 2px #fff) { .hero-title-line { -webkit-text-stroke-width:1.1px; } }
}
@media (max-width:640px) {
  @supports (-webkit-text-stroke: 2px #fff) { .hero-title-line { -webkit-text-stroke-width:.9px; } }
}

/* ── Mobile: el kicker del hero, mas chico ─────────────────────────────── */
/* 21px lo dejaban casi al tamano de un titulo; 17px sigue entrando en dos
   renglones pero deja de competir con el Anton que tiene debajo. */
@media (max-width:640px) {
  .hero-video .hero-kicker { font-size:17px; }
}

/* ── Who's it for en mobile: la tarjeta y el boton ───────────────────── */
/* Apilado, el bloque de titulo repetia lo que ya dice el hero y empujaba la
   tarjeta fuera de pantalla: de esa columna queda solo el Book Now, y pasa
   debajo de la tarjeta para cerrar el bloque. */
@media (max-width:900px) {
  .wf-copy { display:flex; justify-content:center; order:2; }
  .wf-copy > :not(.btn-gold) { display:none; }
}

/* ── Carruseles en mobile: las tarjetas entran todas juntas ────────────── */
/* Cada tarjeta trae su propio reveal, y las que todavia no deslizaste quedan
   fuera del recorte horizontal: el observer las destapa recien al llegar y
   cada una sube sus 26px en pleno swipe, que se ve como un scroll vertical
   dentro del carrusel. En el ancho en que son carrusel, no se animan. */
@media (max-width:700px) {
  .hl-grid > .reveal { opacity:1; transform:none; transition:none; }
}
@media (max-width:800px) {
  .why-grid > .reveal { opacity:1; transform:none; transition:none; }
}
@media (max-width:640px) {
  .why-trust > .reveal { opacity:1; transform:none; transition:none; }
}

/* ── Los dos botones de las tarjetas de ruta en pantallas chicas ───────── */
/* "Contact Us" con el sobre llegaba justo al borde de su mitad: en 360px
   partia en dos renglones y estiraba toda la fila, dejando "View Trip"
   flotando en una pastilla el doble de alta. Se le saca el tracking y algo
   de aire, y por debajo de 355 los dos se apilan a lo ancho. */
@media (max-width:480px) {
  .btn-view, .dir-card-actions .btn-gold { letter-spacing:0; padding-left:8px; padding-right:8px; gap:6px; }
}
@media (max-width:355px) {
  .dir-card-actions { grid-template-columns:1fr; }
}

/* ── 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%);
  }
}

/* ── Mobile: el hero corta en la linea de la G de HOPPING ──────────────── */
/* "ISLAND HOPPING", la linea mas ancha del titulo, mide 5.936em en Anton:
   con el titulo en 11vw (tope de 54px) su borde derecho cae en 65.3vw, y
   ahi cortan el kicker y el pie en vez de irse hasta el margen. Abajo de
   360 el titulo queda fijo en 34px, asi que el corte tambien es fijo. */
@media (max-width:640px) {
  .hero-video .hero-kicker,
  .hero-video .hero-foot-text { max-width:min(65.3vw,320px); }
}
@media (max-width:360px) {
  .hero-video .hero-kicker,
  .hero-video .hero-foot-text { max-width:202px; }
}
/* en espanol la linea mas ancha es "LA LEGENDARIA", que mide 5.488em */
@media (max-width:640px) {
  html[lang="es"] .hero-video .hero-kicker,
  html[lang="es"] .hero-video .hero-foot-text { max-width:min(60.4vw,296px); }
}
@media (max-width:360px) {
  html[lang="es"] .hero-video .hero-kicker,
  html[lang="es"] .hero-video .hero-foot-text { max-width:187px; }
}

/* ── Who's it for: la foto, tal cual ───────────────────────────────────── */
/* El velo de arriba la apagaba entera. El texto blanco de la izquierda se
   sostiene con su propia sombra, asi que la foto va sin nada encima. */
.wf-band::after { display:none; }

/* ── "Create your own story!", blanco y despegado de la foto ──────────── */
/* Sin el velo, el dorado se perdia sobre las palmeras iluminadas: va en
   blanco, con una sombra corta que le da el borde y una larga que lo
   separa del fondo. */
.wf-line { color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.6), 0 4px 22px rgba(0,0,0,.65); }

/* ── Mobile: donde corta el kicker y el par de paises ──────────────────── */
/* El kicker partia solo en "The Original San Blas / Adventures", que separa
   el nombre; el quiebre va despues de "The Original". En desktop el <br>
   no existe, que ahi entra en una linea. */
.kicker-br { display:none; }
@media (max-width:640px) {
  .hero-video .kicker-br { display:inline; }
  /* "Panama & Colombia" es una unidad: no se parte en dos renglones */
  .hero-video .hero-foot-text .accent-gold { white-space:nowrap; }
}

/* ── Mobile: el titulo de la intro, en tres renglones y mas grande ─────── */
/* "THE EXPERIENCE" mide 9.23em en Montserrat 900: con 22px de margen a cada
   lado, 9vw entra holgado hasta en una pantalla de 320. En desktop los <br>
   no existen y el titulo parte solo. */
.exp-br { display:none; }
@media (max-width:640px) {
  .exp-br { display:inline; }
  .island-exp-title { font-size:clamp(26px,9vw,36px); }
}
@media (max-width:360px) {
  .island-exp-title { font-size:clamp(26px,9vw,36px); }
}

/* ── Mobile: el pie del hero corta donde conviene al texto ─────────────── */
/* El corte en la linea de la G dejaba "between" solo en un renglon y los dos
   paises en otro. El quiebre pasa a estar despues de "archipelago" y el pie
   deja de atarse al ancho del titulo. */
.foot-br { display:none; }
@media (max-width:640px) {
  .foot-br { display:inline; }
  .hero-video .hero-foot-text { max-width:none; }
}

/* ── El precio del hero, sin negrita falsa ─────────────────────────────── */
/* Lleva la clase accent-gold, que pide 700, pero Anton tiene un solo peso:
   el navegador lo engordaba a mano y quedaba embarrado. */
.hero-foot-text .hero-foot-price { font-weight:400; }
/* 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; }
}

/* ── El premio, al pie del bloque de intro ─────────────────────────────── */
/* La banda esta centrada, asi que alcanza con que la imagen sea en linea.
   Sobre fondo claro la sombra va suave, solo para apoyarlo. */
.island-exp .sba-award { display:block; margin-top:26px; }
.island-exp .sba-award img { display:inline-block; width:220px; height:auto; filter:drop-shadow(0 6px 16px rgba(11,43,60,.18)); }
@media (max-width:640px) { .island-exp .sba-award { margin-top:20px; } .island-exp .sba-award img { width:168px; } }

/* ── "Connecting travelers since 2011", igual que "15+ Years of Adventure" ─ */
/* Compartian familia, color y caja, pero no el peso ni el tamaño ni el
   tracking: quedaba como una nota al pie en vez de un segundo rotulo. */
.island-exp-tag { font-weight:800; font-size:clamp(16px,2vw,24px); letter-spacing:.04em; }
@media (max-width:360px) { .island-exp-tag { font-size:14px; letter-spacing:.04em; } }

/* ── 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. */
.give-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) { .give-band { background-size:130px 130px; } }

/* ── 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;
}