/* ============================================================
   ECUADOR v2 — mobile-first conversion polish
   Loaded AFTER tour-template.css to override / extend.
   ============================================================ */

:root{
  --bottom-cta-h: 76px;
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* Prevent horizontal scroll on all viewports */
html, body{ overflow-x:hidden; }

/* ============================================================
   Scroll progress bar (gold, 3px, top of viewport)
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:60; background:transparent; pointer-events:none;
}
.scroll-progress > span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold) 0%, #E7B85F 50%, var(--orange) 100%);
  box-shadow:0 0 12px rgba(217,164,65,.55);
  transition:width .12s linear;
  border-radius:0 2px 2px 0;
}

/* ============================================================
   Button microinteractions — scale on press, 150ms
   ============================================================ */
.btn,
.dep-cta,
.tour-pricebox .btn,
.reserve-card .btn,
.step-actions .btn,
.journey-tab,
.sticky-cta a.btn{
  transition: transform .15s var(--ease-soft),
              background .25s var(--ease-soft),
              color .25s,
              box-shadow .25s,
              border-color .25s;
}
.btn:active,
.dep-cta:active,
.tour-pricebox .btn:active,
.reserve-card .btn:active,
.step-actions .btn:active,
.sticky-cta a.btn:active,
.journey-tab:active{ transform:scale(.97); }

/* ============================================================
   Hero — keep text fully visible (no fade), subtle image parallax
   The JS toggles data-fade-text="off" on .tour-hero.
   ============================================================ */
.tour-hero[data-fade-text="off"] .tour-hero-inner{
  opacity:1 !important;
  transform:none !important;
}
.tour-hero[data-fade-text="off"] .scroll-cue{
  opacity:1 !important;
}
.tour-hero-media{
  will-change: transform;
}
.tour-hero-media img,
.tour-hero-media video{
  transition: transform .15s linear;
}

/* ============================================================
   Count-up numbers — tabular for stable width
   ============================================================ */
.count-up{ font-variant-numeric: tabular-nums; }

/* ============================================================
   Sticky mobile CTA — bottom bar, glassmorphism dark
   ============================================================ */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(20,28,14,0) 0%, rgba(20,28,14,.85) 35%, rgba(8,12,4,.96) 100%);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-top:1px solid rgba(217,164,65,.18);
  display:flex; align-items:center;
  transform:translateY(110%);
  opacity:0;
  transition: transform .35s var(--ease-soft), opacity .25s ease;
  pointer-events:none;
}
.sticky-cta.is-visible{
  transform:translateY(0); opacity:1; pointer-events:auto;
}
.sticky-cta .inner{
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:560px; margin:0 auto;
}
.sticky-cta .price{
  display:flex; flex-direction:column; gap:0;
  flex:1; min-width:0;
}
.sticky-cta .price .lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:.20em;
  color:rgba(242,235,221,.7); text-transform:uppercase;
  line-height:1;
}
.sticky-cta .price strong{
  font-family:var(--serif); font-weight:600; font-size:22px;
  letter-spacing:-.015em;
  color:#fff; line-height:1.05; margin-top:4px;
  font-feature-settings:"ss01";
}
.sticky-cta .price strong .currency{
  color:var(--gold); font-size:.65em; vertical-align:top;
  margin-right:2px; font-weight:600;
}
.sticky-cta a.btn{
  flex:0 0 auto; min-height:50px; padding:14px 18px;
  font-size:14.5px; font-weight:700; letter-spacing:.01em;
  border-radius:14px;
  background:#D17F1E; color:#fff;
  box-shadow:0 12px 28px rgba(209,127,30,.5), 0 0 0 1px rgba(255,255,255,.08) inset;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.sticky-cta a.btn:hover{ background:var(--orange-d); transform:translateY(-1px); }

/* Desktop: hide sticky CTA entirely */
@media(min-width:900px){
  .sticky-cta{ display:none !important; }
}

/* Reserve bottom space so footer / form aren't fully covered when bar is visible */
body.has-sticky-cta .site-footer{
  padding-bottom: calc(var(--bottom-cta-h) + env(safe-area-inset-bottom));
}

/* ============================================================
   El Viaje — unified section wrapping Mapa + Día a Día
   ============================================================ */
.tour-journey{
  position:relative;
  padding: 96px 0 0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(92,105,56,.22), transparent 65%),
    radial-gradient(55% 50% at 85% 100%, rgba(217,164,65,.10), transparent 60%),
    linear-gradient(180deg, #1F2818 0%, #0c1108 100%);
  color:#F2EBDD;
  overflow:hidden;
}
@media(max-width:800px){ .tour-journey{ padding:64px 0 0; } }

.tour-journey::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(242,235,221,.18), transparent 60%),
    radial-gradient(1px 1px at 76% 42%, rgba(242,235,221,.10), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 78%, rgba(217,164,65,.25), transparent 60%),
    radial-gradient(1px 1px at 84% 86%, rgba(242,235,221,.10), transparent 60%);
  opacity:.6; pointer-events:none;
}

.journey-head{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center; max-width:760px; margin:0 auto 32px;
  padding:0 20px;
}
.journey-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  color:var(--gold); text-transform:uppercase; font-weight:600;
}
.journey-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px, 4.4vw, 46px);
  color:#F2EBDD; letter-spacing:-.015em; line-height:1.12; margin:0;
}
.journey-title em{
  color:var(--gold); font-style:italic;
  font-family:var(--accent); font-weight:500;
  display:block;
}

/* Tabs — segmented control on dark */
.journey-tabs{
  position:relative; z-index:2;
  display:inline-flex; align-self:center; gap:4px;
  background:rgba(242,235,221,.06);
  border:1px solid rgba(217,164,65,.28);
  border-radius:999px; padding:5px;
  margin:8px auto 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.journey-tab{
  position:relative;
  appearance:none; background:transparent; border:0; cursor:pointer;
  padding:12px 22px; min-height:48px;
  border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; font-weight:600;
  color:rgba(242,235,221,.72); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
}
.journey-tab .ico{ font-size:14px; line-height:1; }
.journey-tab:hover{ color:#F2EBDD; }
.journey-tab[aria-selected="true"]{
  background:linear-gradient(180deg, #E7B85F 0%, var(--gold) 100%);
  color:var(--olive-d);
  box-shadow:0 6px 18px rgba(217,164,65,.35), 0 0 0 1px rgba(255,255,255,.2) inset;
}
.journey-tab:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.journey-panes{ position:relative; z-index:1; }
.journey-pane{ display:none; }
.journey-pane.is-active{
  display:block;
  animation: journeyFade .35s var(--ease-soft) forwards;
}
.journey-pane[hidden]{ display:none !important; }
@keyframes journeyFade{
  0%   { opacity:0; transform:translateY(8px); }
  100% { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .journey-pane.is-active{ animation:none; opacity:1; transform:none; }
}

/* Strip duplicate head/bg from sections nested inside .tour-journey */
.tour-journey .tour-route-map,
.tour-journey .tour-itinerary{
  background:transparent;
  padding:8px 0 0;
}
.tour-journey .tour-route-map::before,
.tour-journey .tour-itinerary::before{ display:none; }
.tour-journey .tour-route-map .route-head{ display:none; }
.tour-journey .tour-itinerary .section-head{ display:none; }
.tour-journey .tour-itinerary{ padding-bottom: 96px; }
.tour-journey .tour-route-map{ padding-bottom: 80px; }
@media(max-width:767px){
  .tour-journey .tour-itinerary{ padding-bottom: 64px; }
  .tour-journey .tour-route-map{ padding-bottom: 56px; }
}

/* ============================================================
   Departure urgency pills (replaces the ::after "Cupos limitados")
   ============================================================ */
.dep-row:has(.dep-status.confirmed) .dep-meta::after,
.dep-row .dep-meta::after{ content:none !important; }

.dep-urgency{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 10px; border-radius:999px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; font-weight:700;
  text-transform:uppercase;
  background:rgba(217,164,65,.14);
  border:1px solid rgba(217,164,65,.45);
  color:#A8782B;
  width:fit-content;
  line-height:1.2;
  margin-top:2px;
  /* auto-placed after .dep-meta, before .dep-cta */
  justify-self:start;
}
.dep-urgency.amber{
  background:rgba(217,164,65,.14);
  border-color:rgba(217,164,65,.45);
  color:#A8782B;
}
.dep-urgency.soft{
  background:rgba(31,40,24,.04);
  border-color:rgba(31,40,24,.14);
  color:var(--olive-2);
  font-weight:600;
}
.dep-urgency::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:#D9A441;
  box-shadow:0 0 0 3px rgba(217,164,65,.22);
  animation: depPulse 2.2s ease-in-out infinite;
}
.dep-urgency.soft::before{
  background:var(--olive-2);
  box-shadow:0 0 0 3px rgba(31,40,24,.10);
  animation:none;
}
@keyframes depPulse{
  0%, 100% { box-shadow:0 0 0 3px rgba(217,164,65,.22); }
  50%      { box-shadow:0 0 0 6px rgba(217,164,65,.05); }
}

/* On desktop dep-row stacks status/date/hook/meta/cta — meta line shows
   the days-from line. We move that to be alongside or under the urgency. */
.dep-row{
  grid-template-areas:
    "status"
    "date"
    "hook"
    "meta"
    "urg"
    "cta";
}
.dep-urgency{ grid-area: urg; }
.dep-row .dep-meta{
  border-top:none; padding-top:0;
  font-size:11px; letter-spacing:.10em;
  opacity:.85;
}
.dep-row .dep-meta + .dep-urgency{ margin-top:8px; }

/* ============================================================
   Social proof — Home-format testimonials (.t-card) in a 3-up grid
   We REUSE the home page's .t-card / .t-stars / .t-avatar styles
   (defined in styles.css) and just provide the grid wrapper here.
   ============================================================ */
.tour-testimonials{
  padding:96px 0;
  background:var(--cream);
}
@media(max-width:800px){ .tour-testimonials{ padding:64px 0; } }
.tour-testimonials .section-head{ margin-bottom:48px; }

.t-grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  max-width:1200px; margin:0 auto;
}
.t-grid > .t-card{ width:auto; min-width:0; }

@media(max-width:1000px){
  .t-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:760px; }
}
@media(max-width:680px){
  /* Mobile: horizontal scroll-snap carousel of cards */
  .t-grid{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scroll-padding-left:20px;
    -webkit-overflow-scrolling:touch;
    padding: 4px 20px 20px;
    margin: 0 -20px;
    max-width:none;
    scrollbar-width:none;
  }
  .t-grid::-webkit-scrollbar{ display:none; }
  .t-grid > .t-card{
    flex:0 0 auto;
    width:84vw; max-width:340px;
    scroll-snap-align:center;
  }
}

/* Avatar treatment — slight tweak: white text always visible on the gold avatar */
.t-avatar-gold{ color:var(--olive-d) !important; }
.t-avatar{ font-size:16px; }
.t-card .t-avatar{ font-size:16px; letter-spacing:.04em; }
/* 3-letter avatars (HLT) — fit them */
.t-card .t-avatar:has(:only-child),
.t-card .t-avatar{ overflow:hidden; }
.t-card.t-partner .t-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px;
}

/* ============================================================
   Pricing section — premium entry animations
   Count-up + gold underline + cinematic shimmer + stagger
   ============================================================ */
.price-block{ position:relative; }
.price-big{
  position:relative;
  display:inline-flex; align-items:baseline;
  isolation:isolate; /* keep shimmer above the digits */
  padding-bottom: 16px; /* room for the underline */
  margin-bottom: 6px;
}
.price-number{ display:inline-block; }
.price-shimmer{
  position:absolute; top:0; left:0; right:0;
  bottom:16px; /* don't shimmer over the underline */
  pointer-events:none;
  z-index:2;
  overflow:hidden;
  border-radius:6px;
  opacity:0;
}
.price-shimmer::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:-30%; width:120px;
  background:linear-gradient(
    100deg,
    rgba(217,164,65,0)   0%,
    rgba(217,164,65,.35) 50%,
    rgba(217,164,65,0)   100%
  );
  filter:blur(4px);
  transform:translateX(0);
  pointer-events:none;
}
.price-block.is-shimmer .price-shimmer{ opacity:1; }
.price-block.is-shimmer .price-shimmer::before{
  animation: priceShimmer 800ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes priceShimmer{
  0%   { left:-30%;  opacity:0;   }
  10%  {              opacity:1;   }
  90%  {              opacity:1;   }
  100% { left:130%; opacity:0;   }
}

.price-underline{
  /* Centered under the number, animates from 0 → 80px wide */
  position:absolute;
  left:50%;
  bottom:0;
  width:80px; height:2px;
  margin-left:-40px;        /* visual center under the price */
  background: linear-gradient(90deg, var(--gold) 0%, #E7B85F 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 0 12px rgba(217,164,65,.45);
  will-change: transform;
}
.price-block.is-underline .price-underline{ transform: scaleX(1); }

/* Stagger items — hidden until the section enters viewport */
.price-stagger{
  opacity:0;
  transform: translateY(12px);
  transition: opacity 500ms cubic-bezier(.16, 1, .3, 1),
              transform 500ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}
.price-stagger.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Respect motion preferences — everything ends in its final state instantly. */
@media (prefers-reduced-motion: reduce){
  .price-shimmer,
  .price-shimmer::before{ animation:none !important; opacity:0 !important; }
  .price-underline{ transform: scaleX(1) !important; transition:none !important; }
  .price-stagger{ opacity:1 !important; transform:none !important; transition:none !important; }
}
.tour-guarantee{
  position:relative;
  padding: 96px 0;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(217,164,65,.10), transparent 70%),
    linear-gradient(180deg, #1F2818 0%, #131A0E 100%);
  color:#F2EBDD;
  overflow:hidden;
}
@media(max-width:800px){ .tour-guarantee{ padding:64px 0; } }
.tour-guarantee::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(242,235,221,.10), transparent 60%),
    radial-gradient(1.4px 1.4px at 72% 78%, rgba(217,164,65,.20), transparent 60%);
  opacity:.7; pointer-events:none;
}
.tour-guarantee .container{ position:relative; z-index:1; }

.guarantee-header{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; margin:0 auto 56px;
  max-width:760px;
}
@media(max-width:767px){ .guarantee-header{ margin-bottom:40px; } }
.guarantee-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  color:var(--gold); text-transform:uppercase; font-weight:600;
  padding-bottom:8px; border-bottom:1px solid var(--gold);
}
.guarantee-header h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px, 4.2vw, 46px);
  color:#F2EBDD; letter-spacing:-.015em; line-height:1.1;
  margin:0;
}
.guarantee-header h2 em{
  color:var(--gold); font-style:italic;
  font-family:var(--accent); font-weight:500;
}

.guarantee-row{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:0;
  max-width:1180px; margin:0 auto;
}
.guarantee-point{
  position:relative;
  padding: 8px 36px 12px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
/* Hairline gold divider between desktop columns */
.guarantee-point + .guarantee-point::before{
  content:""; position:absolute;
  left:0; top:18%; bottom:18%; width:1px;
  background:linear-gradient(180deg,
              transparent 0%,
              rgba(217,164,65,.42) 30%,
              rgba(217,164,65,.42) 70%,
              transparent 100%);
}
.guarantee-point .ico{
  width:48px; height:48px;
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:4px;
}
.guarantee-point .ico svg{
  width:38px; height:38px;
  stroke:currentColor; stroke-width:1.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 2px 10px rgba(217,164,65,.25));
}
.guarantee-point strong{
  font-family:var(--serif); font-weight:500;
  font-size:19px; line-height:1.25;
  color:#F2EBDD; letter-spacing:-.005em;
  max-width:28ch;
}
.guarantee-point span{
  font-family:var(--sans);
  font-size:15px; line-height:1.55;
  color:rgba(242,235,221,.72);
  max-width:32ch;
}

@media(max-width:900px){
  .guarantee-row{ grid-template-columns:1fr; max-width:520px; gap:0; }
  .guarantee-point{
    padding: 28px 8px;
  }
  /* Horizontal hairline between mobile rows */
  .guarantee-point + .guarantee-point::before{
    left:10%; right:10%; top:0; bottom:auto;
    width:auto; height:1px;
    background:linear-gradient(90deg,
                transparent 0%,
                rgba(217,164,65,.42) 30%,
                rgba(217,164,65,.42) 70%,
                transparent 100%);
  }
  .guarantee-point .ico svg{ width:34px; height:34px; }
  .guarantee-point strong{ font-size:18px; }
  .guarantee-point span{ font-size:15.5px; line-height:1.6; }
}

/* ============================================================
   Otros destinos — horizontal slider (scroll-snap + dots + arrows)
   ============================================================ */
.tour-related{ position:relative; overflow:hidden; }
.related-slider{
  position:relative;
  max-width: calc(var(--maxw) + 32px);
  margin: 32px auto 0;
}
.related-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  /* keep behavior:auto here — JS drives smooth scrolling on dot/arrow taps;
     mandatory snap + CSS smooth scroll conflict in some embed contexts. */
  scroll-behavior:auto;
  scroll-padding-left:24px;
  -webkit-overflow-scrolling:touch;
  padding: 8px 24px 24px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.related-track::-webkit-scrollbar{ display:none; }
.related-track:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:8px; }

.related-track .related-card{
  flex: 0 0 auto;
  /* Desktop: ~2.4 visible inside container → ~360px wide */
  width: 360px;
  max-width: 360px;
  scroll-snap-align:start;
}
@media(min-width:1100px){
  .related-track .related-card{ width: 380px; max-width: 380px; }
}
@media(max-width:900px){
  .related-track .related-card{
    /* 1 main + peek */
    width: 78vw;
    max-width: 360px;
    scroll-snap-align:center;
  }
}

.related-tagline{
  font-size:14.5px; line-height:1.55;
  color:var(--olive-2);
  margin:0;
}

/* Arrows — only desktop ≥768 (mobile uses swipe) */
.rel-arrow{
  position:absolute; top:42%; transform:translateY(-50%);
  z-index:6;
  width:52px; height:52px; border-radius:50%;
  background:var(--rock); color:var(--olive-d);
  border:1px solid var(--cream-d);
  cursor:pointer; padding:0;
  box-shadow:0 8px 24px rgba(31,40,24,.16);
  font-size:28px; line-height:1; font-weight:300;
  display:none; align-items:center; justify-content:center;
  transition: background .25s var(--ease-soft), color .25s, transform .25s var(--ease-soft), box-shadow .25s;
}
.rel-arrow span{ display:block; margin-top:-3px; }
.rel-arrow.prev{ left:-6px; }
.rel-arrow.next{ right:-6px; }
.rel-arrow:hover{
  background:var(--gold); color:var(--olive-d);
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 14px 32px rgba(217,164,65,.35);
}
.rel-arrow:active{ transform:translateY(-50%) scale(.96); }
.rel-arrow:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.rel-arrow[disabled]{ opacity:.4; cursor:not-allowed; }
@media(min-width:768px){ .rel-arrow{ display:flex; } }

/* Dots */
.rel-dots{
  display:flex; justify-content:center; gap:10px;
  margin-top:18px; padding:0 24px;
  flex-wrap:wrap;
}
.rel-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(31,40,24,.18);
  border:0; padding:0; cursor:pointer;
  transition: background .25s var(--ease-soft), width .25s, border-radius .25s;
}
.rel-dot:hover{ background:rgba(217,164,65,.55); }
.rel-dot.active{
  background:var(--gold);
  width:24px; border-radius:4px;
}
.rel-dot:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Keep original grid as a safety fallback if JS fails */
.related-grid{ display:none; }

/* ============================================================
   Mobile-first typography overrides
   ============================================================ */
@media(max-width:767px){
  body{ font-size:17px; line-height:1.55; }

  /* Hero h1 */
  .tour-hero h1{
    font-size:clamp(44px, 10.5vw, 52px) !important;
    line-height:1.0;
  }
  .tour-hero h1 em{ font-size:.55em; }

  /* Section titles 32px */
  .section-title{
    font-size:32px !important;
    line-height:1.1;
  }
  .route-title,
  .journey-title{ font-size:32px !important; line-height:1.1; }

  /* Subs / leads / body — 17px */
  .tour-summary .lead{ font-size:17px; line-height:1.6; }
  .day-narrative{ font-size:17px; line-height:1.65; }
  .day-narrative p{ font-size:17px; line-height:1.65; }
  .t-card p{ font-size:17px; line-height:1.6; }
  .guarantee-point span{ font-size:15.5px; line-height:1.6; }
  .reserve-list li{ font-size:16px; line-height:1.6; }
  .inc-list li{ font-size:16px; line-height:1.6; }
  .price-note{ font-size:16px; line-height:1.55; }

  /* Sub-titles 22px */
  .day-title{ font-size:22px !important; line-height:1.25 !important; }
  .related-title{ font-size:24px !important; }
  .guarantee-point strong{ font-size:17px; }
  .t-card footer strong{ font-size:15.5px; }

  /* Section padding 64 mobile / 96 desktop */
  .tour-summary,
  .tour-departures,
  .tour-included,
  .tour-pricing,
  .tour-form-section,
  .tour-related,
  .tour-testimonials,
  .tour-guarantee{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Touch targets */
  .lang-btn{ min-height:36px; min-width:36px; }
  .nav-primary a{ padding:12px 0; }
  .journey-tab{ min-height:48px; }
  .ribbon-dot{
    width:10px; height:10px;
    /* enlarge hit area via padding without changing visual size */
  }

  /* Bottom padding to clear sticky CTA */
  body.has-sticky-cta{
    padding-bottom: 0;
  }
  body.has-sticky-cta .tour-form-section,
  body.has-sticky-cta #footer{
    /* the sticky CTA hides itself near the form anyway */
  }
}

/* ============================================================
   HERO mobile layout — image on top, then text + price card
   (Per spec: imagen arriba a ancho completo, debajo bloque)
   ============================================================ */
@media(max-width:767px){
  .tour-hero{
    min-height:auto;
    padding:0 0 32px;
    display:block;
    background: var(--olive-d);
  }
  .tour-hero-media{
    position:relative;
    height:64vw;
    min-height:280px;
    max-height:62vh;
    inset:auto;
  }
  .tour-hero-overlay{
    inset:auto 0 0 0;
    height:50%;
    background:linear-gradient(180deg, transparent 0%, rgba(31,40,24,.4) 100%);
  }
  .tour-hero-inner{
    position:relative; z-index:2;
    padding: 22px 20px 0;
    grid-template-columns:1fr !important;
    gap:18px;
    margin-top: 0;
  }
  .tour-breadcrumb{
    /* Flow naturally at the TOP of the hero text block, above PAISAJES ANDINOS.
       Never absolute-positioned (it used to overlap the H1). */
    position:static;
    margin: 0 0 16px;
    padding: 0;
    color: rgba(250,250,247,.8);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
  }
  .tour-breadcrumb a{ color:inherit; }
  .tour-breadcrumb .current{ color:#fff; }
  .tour-hero-eyebrow{
    margin-bottom:14px;
    color:var(--gold);
    border-bottom-color:rgba(217,164,65,.5);
  }
  .tour-hero h1{ color:#fff; }
  .tour-hero h1 em{ color:var(--gold); }
  .tour-meta{
    color:rgba(250,250,247,.92);
    font-size:13px;
  }
  .tour-pills .tour-pill{
    background:rgba(250,250,247,.08);
    border-color:rgba(250,250,247,.18);
  }
  .tour-pricebox{
    margin-top: 8px;
    padding: 22px 22px 20px;
    border-radius: 22px;
    background:linear-gradient(155deg, rgba(31,40,24,.85) 0%, rgba(12,18,7,.80) 100%);
  }
  .tour-pricebox .btn{
    min-height: 56px;
    padding: 18px 22px;
    font-size: 16.5px;
    font-weight:700;
    border-radius: 14px;
  }
  .tour-hero .scroll-cue{ display:none; }
}

/* ============================================================
   PHOTO SLIDER — mobile (single carousel, gold dots, smooth)
   ============================================================ */
.tour-ribbons .ribbon-track{
  scroll-behavior:smooth;
}
.tour-ribbons .ribbon-track,
.tour-ribbons .ribbon-strip{
  /* When JS does its smooth scroll, animate via this curve */
  scroll-behavior:smooth;
}

@media(max-width:767px){
  .tour-ribbons .ribbon-item{
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(31,40,24,.18);
  }
  .tour-ribbons .ribbon-caption{
    font-family:var(--sans);
    font-weight:500; letter-spacing:.02em;
    font-size:13px; text-transform:none;
    color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5);
  }
  .ribbon-dots{ gap:9px; margin-top:20px; }
  .ribbon-dot{
    background: rgba(31,40,24,.20);
  }
  .ribbon-dot.active{
    background: var(--gold);
    width: 24px; border-radius: 4px;
  }
}

/* ============================================================
   Header glassmorphism on solid state — better mobile contrast
   ============================================================ */
.site-header[data-state="solid"]{
  background:rgba(250,250,247,.92);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(31,40,24,.06), 0 6px 24px rgba(31,40,24,.06);
}

/* ============================================================
   Hide scroll progress on print
   ============================================================ */
@media print{
  .scroll-progress, .sticky-cta{ display:none !important; }
}


/* ============================================================
   V7 — Premium hover on guarantee icons
   Halo (blurred gold disc behind icon) + lift + one-shot shimmer.
   Only the hovered icon is affected.
   ============================================================ */
.guarantee-point{ isolation:isolate; }
.guarantee-point .ico{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:
    transform .3s cubic-bezier(0.16, 1, 0.3, 1),
    filter   .3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Halo: blurred gold disc behind the icon */
.guarantee-point .ico::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:120px; height:120px;
  margin:-60px 0 0 -60px;
  border-radius:50%;
  background: radial-gradient(circle, #D9A441 0%, rgba(217,164,65,.55) 55%, rgba(217,164,65,0) 78%);
  filter: blur(20px);
  opacity:0;
  pointer-events:none;
  transition: opacity 400ms ease-out;
  z-index:-1;
}

/* Shimmer: one-shot diagonal sweep across the icon on hover-in */
.guarantee-point .ico::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-100%;
  width:60px;
  background: linear-gradient(110deg,
    rgba(217,164,65,0)   0%,
    rgba(217,164,65,.45) 50%,
    rgba(217,164,65,0)   100%);
  pointer-events:none;
  opacity:0;
  z-index:2;
}

/* Active states: hover (mouse) AND focus (kbd) AND :active (touch) */
.guarantee-point .ico:hover,
.guarantee-point .ico:focus-visible,
.guarantee-point:active .ico{
  transform: translateY(-4px);
  filter: drop-shadow(0 8px 24px rgba(217,164,65,0.35));
}
.guarantee-point .ico:hover::before,
.guarantee-point .ico:focus-visible::before,
.guarantee-point:active .ico::before{
  opacity:.28;
}
.guarantee-point .ico:hover::after,
.guarantee-point .ico:focus-visible::after,
.guarantee-point:active .ico::after{
  animation: guaranteeShimmer 700ms ease-out 1;
}
@keyframes guaranteeShimmer{
  0%   { left:-100%; opacity:0; }
  10%  { opacity:.5; }
  90%  { opacity:.5; }
  100% { left:200%;  opacity:0; }
}

/* Touch — release reverts on next tick */
@media (hover: none){
  .guarantee-point .ico{ transition: transform .25s ease, filter .25s ease; }
}

/* Reduced motion — keep things calm: no shimmer/lift, only subtle opacity */
@media(prefers-reduced-motion:reduce){
  .guarantee-point .ico{
    transition:opacity .25s ease;
  }
  .guarantee-point .ico:hover,
  .guarantee-point .ico:focus-visible,
  .guarantee-point:active .ico{
    transform:none;
    filter:none;
    opacity:.85;
  }
  .guarantee-point .ico::after,
  .guarantee-point .ico::before{ display:none; }
}