/* ============================================================
   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:0 16px calc(16px + env(safe-area-inset-bottom));
  display:flex; justify-content:center;
  /* El wrapper es transparente y no intercepta: antes era una franja a todo el
     ancho con degradado y blur, y sobre las tarjetas claras ese degradado dejaba
     un canto oscuro. Ahora lo visible es .inner, un panel redondeado con margen,
     así no hay transición degradado-contenido y desaparece la línea negra. */
  pointer-events:none;
  /* Sale deslizándose sólo un 60% de su alto y desvaneciéndose, en vez de
     cruzar el 118% entera: recorre menos camino y se va sin dar un portazo. */
  transform:translateY(60%);
  opacity:0;
  transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .22s ease-out;
}
.sticky-cta.is-visible{
  transform:translateY(0); opacity:1;
  /* Entrada a 340ms: los 520ms anteriores se sentían perezosos (Edwin pidió
     acelerarla). La curva arranca con decisión y sigue frenando suave al
     final, así que gana velocidad sin recuperar el golpe de irrumpir. */
  transition: transform .34s cubic-bezier(.25,.9,.3,1), opacity .26s ease-out;
}
.sticky-cta .inner{
  /* 20px de separación: con 14 el texto de urgencia casi tocaba el botón. */
  display:flex; align-items:center; gap:16px;
  width:100%; max-width:560px;
  padding:14px 18px;
  border-radius:22px;
  background:rgba(24,32,18,.9);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(217,164,65,.24);
  box-shadow:0 12px 34px -10px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.28);
  pointer-events:auto;
}
.sticky-cta:not(.is-visible) .inner{ pointer-events:none; }
.sticky-cta .price{
  display:flex; flex-direction:column; gap:0;
  flex:1; min-width:0;
}
.sticky-cta .price{ gap:5px; align-items:flex-start; text-align:left; }
/* Sin cápsula, sin borde y sin punto. Encerrar la palabra en una píldora la
   convertía en una etiqueta suelta, y el conjunto píldora+punto metía ~24px de
   relleno a la izquierda: el texto arrancaba desalineado respecto a
   "Desde $1,697" de abajo y encima quedaba pegado al botón. Ahora las dos
   líneas comparten el borde izquierdo y el peso lo da el color, no una caja. */
.sticky-cta .price .urg{
  display:block;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.25;
  color:var(--gold);
}
.sticky-cta .price strong .lbl{
  font-family:var(--mono); font-size:.5em; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(242,235,221,.6); margin-right:5px; vertical-align:.15em;
}
/* Regla vieja de .lbl como bloque, ya no aplica (el label va inline dentro de strong):
.sticky-cta .price .lbl_OFF{
  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{
  /* Baja de 22 a 19: al lado de un texto de urgencia de 11px, 22 se comía
     toda la atención y el conjunto quedaba desequilibrado. */
  font-family:var(--serif); font-weight:600; font-size:19px;
  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:46px; padding:12px 14px;
  font-size:14px; font-weight:700; letter-spacing:.015em;
  border-radius:999px;
  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{
  transition: transform .16s cubic-bezier(.23,1,.32,1), background .16s ease;
}
/* El hover sólo donde hay puntero: en táctil se dispara al tocar y se queda pegado. */
@media (hover:hover) and (pointer:fine){
  .sticky-cta a.btn:hover{ background:var(--orange-d); transform:translateY(-1px); }
}
/* Acusar recibo del toque: sin esto el botón no contesta hasta que carga el modal. */
.sticky-cta a.btn:active{ transform:scale(.97); }

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

/* Móvil: de altares centrados a filas. Cada punto era un icono centrado,
   título centrado y descripción centrada, apilados: ~290px por punto y 879px
   la sección entera, más de una pantalla para tres datos de confianza. El
   texto centrado a dos líneas además obliga al ojo a buscar de nuevo dónde
   empieza cada renglón. Ahora el icono va a la izquierda y el texto alineado
   a la izquierda, como una lista que se recorre de un vistazo. */
@media(max-width:900px){
  .guarantee-row{ grid-template-columns:1fr; max-width:560px; gap:0; }
  .guarantee-point{
    display:grid;
    grid-template-columns:40px 1fr;
    grid-template-areas:"ico titulo" "ico texto";
    column-gap:16px; row-gap:5px;
    align-items:start; text-align:left;
    padding:22px 4px;
  }
  .guarantee-point .ico{ grid-area:ico; width:34px; height:34px; margin:2px 0 0; }
  .guarantee-point strong{ grid-area:titulo; max-width:none; }
  .guarantee-point span{ grid-area:texto; max-width:none; }
  /* 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:26px; height:26px; }
  .guarantee-point strong{ font-size:17px; line-height:1.3; }
  .guarantee-point span{ font-size:14.5px; line-height:1.55; }
}

/* ============================================================
   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;
  }
  /* Foco de la tarjeta centrada (Edwin: "una manera bonita de pasar"): las
     vecinas se atenúan y encogen un pelo, la activa resalta. Deslizar se
     siente intencional y premium. Selector con .tour-related para ganarle a
     las reglas posteriores de .related-card. transform:scale no mueve el
     punto de snap (usa la caja de layout), así que el snap sigue exacto. */
  .tour-related .related-track .related-card{
    opacity:.48;
    transform:scale(.925);
    transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
  }
  .tour-related .related-track .related-card.rel-focus{
    opacity:1;
    transform:none;
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .tour-related .related-track .related-card{ opacity:1; transform:none; transition:none; }
}

.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;
    /* Edwin: el bloque de texto (rotulo, titulo, chips) quedaba pegado
       arriba, contra el header. Bajado ~14vh para centrarlo un poco. */
    padding: clamp(96px, 14vh, 148px) 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;
  }
  /* La barrita "Descubre el viaje" estuvo oculta en movil por una regla
     de esta media query; Edwin la quiere como en el home: visible. */
}

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

/* Una barra que se desliza en el borde inferior es justo el tipo de movimiento
   que molesta a quien pide menos animación. Sigue apareciendo, sin desplazarse. */
@media (prefers-reduced-motion: reduce){
  .sticky-cta{ transform:none; transition: opacity .2s ease-out; }
  .sticky-cta.is-visible{ transform:none; transition: opacity .2s ease-out; }
  .sticky-cta a.btn:active{ transform:none; }
}

/* ── El WhatsApp y el ticket se ALTERNAN, no conviven ────────────────
   Edwin (26-ago): antes el botón se apartaba hacia arriba y ambos quedaban
   a la vista al mismo tiempo — se veía chocante. Ahora, mientras el ticket
   está arriba, el WhatsApp se ESCONDE del todo (red dura por CSS, gana por
   especificidad sobre .wa-armed.wa-shown), y vuelve a su ciclo cuando el
   ticket baja. El JS (script.js) además le cede el turno de entrada. */
body.sticky-cta-visible .wa-float.wa-armed{
  opacity: 0 !important;
  transform: translateY(10px) scale(.85) !important;
  pointer-events: none !important;
}

/* ── La llamada de atención al asomar ────────────────────────────────
   Un latido del botón, no de la barra entera: lo que tiene que mirarse
   es dónde tocar. Se aplica sólo las dos primeras apariciones (lo
   controla ecuador-v2.js) porque con el ocultado por inactividad la
   barra asoma decenas de veces por sesión. */
@keyframes ttLatido{
  0%   { transform:scale(1);    box-shadow:0 12px 28px rgba(209,127,30,.5), 0 0 0 0 rgba(217,164,65,.55); }
  35%  { transform:scale(1.045); box-shadow:0 14px 32px rgba(209,127,30,.6), 0 0 0 10px rgba(217,164,65,0); }
  70%  { transform:scale(1);    box-shadow:0 12px 28px rgba(209,127,30,.5), 0 0 0 0 rgba(217,164,65,0); }
  100% { transform:scale(1);    box-shadow:0 12px 28px rgba(209,127,30,.5), 0 0 0 0 rgba(217,164,65,0); }
}
.sticky-cta.llama-atencion a.btn{
  animation: ttLatido 1.05s cubic-bezier(.23,1,.32,1) .18s 3;
}

/* Un destello que barre el botón de izquierda a derecha — el latido y el halo
   solos se le pasaban a Edwin, esto sí se ve. El botón recorta con overflow y
   el brillo va en un ::after por encima; el texto queda debajo del reflejo, como
   una pasada de luz. */
.sticky-cta a.btn{ position:relative; overflow:hidden; isolation:isolate; }
.sticky-cta a.btn::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-130%);
}
.sticky-cta.llama-atencion a.btn::after{
  animation: ttBrillo 1.05s ease-in-out .3s 3;
}
@keyframes ttBrillo{
  0%   { transform:translateX(-130%); }
  55%  { transform:translateX(130%); }
  100% { transform:translateX(130%); }
}
@media (prefers-reduced-motion: reduce){
  body.sticky-cta-visible .wa-float.wa-armed{ opacity:0 !important; transform:none !important; pointer-events:none !important; }
  .sticky-cta.llama-atencion a.btn{ animation:none; }
  .sticky-cta.llama-atencion a.btn::after{ animation:none; }
  .sticky-cta .price .urg::before{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════════
   Mapa / Día a día — que se note que se puede cambiar
   ------------------------------------------------------------------
   El grupo de pestañas ya existía, pero la inactiva quedaba tan apagada
   (72% de opacidad sobre fondo oscuro) que no se leía como tocable: se
   veía como una etiqueta, no como un botón. Tres cambios, ninguno
   decorativo:

   1. La inactiva sube de contraste y gana su propio fondo tenue, así se
      lee como la otra mitad de un interruptor.
   2. El fondo dorado del activo SE DESLIZA de una pestaña a la otra en
      vez de saltar. Deslizarse es lo que enseña que son dos posiciones
      del mismo control.
   3. Al entrar la sección en pantalla, el grupo respira una vez. Una
      sola, la primera: es una señal, no un adorno.
   ══════════════════════════════════════════════════════════════════ */

/* El indicador que se desliza. Vive en el contenedor, no en la pestaña, y su
   posición y ancho los mide el JS sobre la pestaña activa: "MAPA" y "DÍA A
   DÍA" no miden lo mismo (109 y 148px), así que dar por hecho media caja lo
   dejaría desalineado. */
.journey-tabs::before{
  content:"";
  position:absolute; z-index:0;
  top:5px; bottom:5px; left:0;
  width:var(--ind-w, 50%);
  transform:translateX(var(--ind-x, 5px));
  border-radius:999px;
  background:linear-gradient(180deg, #E7B85F 0%, var(--gold) 100%);
  box-shadow:0 6px 18px rgba(217,164,65,.35), 0 0 0 1px rgba(255,255,255,.2) inset;
  transition: transform .34s cubic-bezier(.23,1,.32,1),
              width .34s cubic-bezier(.23,1,.32,1);
}
/* Hasta que el JS mida, mejor no pintar nada que pintarlo torcido — y si el
   JS no llegara a correr nunca, el activo se pinta su fondo como toda la
   vida, para no quedarnos sin ninguna marca de cuál está puesto. */
.journey-tabs:not([data-activo])::before{ opacity:0; }
.journey-tabs:not([data-activo]) .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;
}

/* El activo ya no pinta su propio fondo: lo pone el indicador de arriba. */
.journey-tab{ position:relative; z-index:1; color:rgba(242,235,221,.86); }
.journey-tab[aria-selected="true"]{
  background:none; box-shadow:none; color:var(--olive-d);
}
/* La inactiva se lee como la otra mitad del interruptor. */
.journey-tab[aria-selected="false"]{
  background:rgba(242,235,221,.05);
}
.journey-tab[aria-selected="false"]:hover{ background:rgba(242,235,221,.1); }

/* El aviso de que esto se toca. Primero fue un pulso único de 1,5s: pasaba una
   vez y si en ese momento mirabas otra parte, se acabó — Edwin no lo vio nunca.
   Después fue en bucle pero sólo hasta el primer toque, y tampoco: quien ya
   tocó sigue sin saber que puede volver.

   Ahora es permanente y siempre sobre la pestaña que NO está puesta, así que
   funciona en los dos sentidos: desde el mapa señala el itinerario y desde el
   itinerario señala el mapa. Lento y suave a propósito — tiene que llamar de
   reojo, no competir con el contenido. */
.journey-tab[aria-selected="false"]{
  animation: ttPestanaLlama 2.6s cubic-bezier(.23,1,.32,1) infinite;
}
@keyframes ttPestanaLlama{
  0%, 62%, 100%{ background:rgba(242,235,221,.05); transform:none; }
  70%          { background:rgba(217,164,65,.20); transform:translateY(-2px); }
  84%          { background:rgba(217,164,65,.12); transform:none; }
}
/* Y una flecha que insinúa el movimiento lateral, del lado por el que
   entraría el indicador. */
.journey-tab[aria-selected="false"]::after{
  content:"";
  position:absolute; top:50%; margin-top:-3px;
  width:6px; height:6px; border-right:2px solid var(--gold); border-top:2px solid var(--gold);
  opacity:0;
  animation: ttFlechita 2.6s ease-out infinite;
}
.journey-tab[data-tab="dia"][aria-selected="false"]::after{
  right:10px; transform:rotate(45deg);
}
.journey-tab[data-tab="mapa"][aria-selected="false"]::after{
  left:10px; transform:rotate(-135deg);
}
@keyframes ttFlechita{
  0%, 62%, 100%{ opacity:0; }
  72%          { opacity:.9; }
  86%          { opacity:0; }
}

/* ── El destello blanco al cambiar de panel ──────────────────────────
   No lo pude reproducir en el navegador de pruebas, pero la causa más
   probable es el rasterizado: pasar un subárbol enorme (siete días, 19
   fotos) de display:none a block obliga a Safari a repintar de golpe, y
   mientras tanto puede asomar el fondo del documento, que es #FAFAF7 —
   casi blanco. La sección pinta su fondo con gradientes; si el gradiente
   aún no está rasterizado, no hay color de respaldo debajo.
   Se le da uno explícito: si algo tarda en pintarse, lo que asoma es
   olivo oscuro y no blanco. */
.tour-journey{ background-color:#141c0e; }
.journey-panes{ background-color:#141c0e; }

@media (prefers-reduced-motion: reduce){
  .journey-tabs::before{ transition:none; }
  .journey-tab[aria-selected="false"],
  .journey-tab[aria-selected="false"]::after{ animation:none; }
}

/* ── Que el mapa respire ─────────────────────────────────────────────
   En móvil la sección abría con 64px de aire, el encabezado cerraba con
   32 más, y al mapa le quedaba lo que sobraba. En Perú se nota el doble
   porque sus siete paradas caben en un rectángulo del 25% de ancho por
   13% de alto —Lima, Ica y la zona de Cusco están de verdad así de
   juntas— y con el mapa aplastado los pines se pisan unos a otros.

   Se recorta el aire de arriba y se le da altura al mapa: los mismos
   porcentajes se convierten en más píxeles y las paradas se separan sin
   tener que moverlas de donde están de verdad. */
@media(max-width:900px){
  .tour-journey{ padding-top:40px; }
  .journey-head{ margin-bottom:20px; gap:12px; }
  .journey-tabs{ margin-top:4px; }
}
@media(max-width:767px){
  /* NO se toca el aspect-ratio del mapa. Es 11/8 porque ése es el tamaño real
     de la imagen de la silueta (3300×2400) y los pines se posicionan en
     PORCENTAJE DEL CONTENEDOR: al estirarlo a 1/1.12 la silueta se centró
     dejando 67px de banda arriba y abajo, y todas las paradas quedaron
     desviadas esos 67px respecto al país. Se probó y se revirtió.
     Para que el mapa quepa más grande hay que darle más ANCHO o recortar la
     silueta a la zona visitada, no cambiarle la proporción. */
  /* Aquí hubo un intento de bajar los pines a 26px que NUNCA llegó a
     aplicarse — medido en producción siguen en 34px — y se retira en vez de
     dejarlo engañando. Tampoco habría servido: en Perú las paradas 5 y 6
     están a 17px de centro a centro, así que ni un pin de 20px cabría sin
     tocar al vecino. Ese apretujamiento no se arregla con CSS: o se recorta
     la silueta a la zona visitada, o se agrupan las paradas de Cusco. */
}

/* ── El vuelo de ida ─────────────────────────────────────────────────
   Un avión recorre la línea de puntos desde la parada 1 hasta la 2 y se
   desvanece al llegar. Las coordenadas las mide el JS sobre los propios
   pines, así que sirve igual para Ecuador, para Perú y para el país que
   venga: nadie tiene que escribir la ruta a mano. */
.route-avion{
  position:absolute; z-index:3; pointer-events:none;
  width:22px; height:22px; margin:-11px 0 0 -11px;
  left:var(--av-x1,10%); top:var(--av-y1,10%);
  color:var(--gold,#D9A441);
  opacity:0;
}
.route-avion svg{ width:100%; height:100%; display:block; fill:currentColor; }
/* Una sola vez, cuando el mapa se ve por primera vez. En bucle se convertía
   en un adorno que se repite mientras alguien lee la leyenda. */
.route-board.mapa-visible .route-avion{
  animation: ttVuelo 2.8s cubic-bezier(.45,0,.35,1) 1.6s 1 forwards;
}
@keyframes ttVuelo{
  0%   { opacity:0; left:var(--av-x1); top:var(--av-y1); transform:rotate(var(--av-giro,0deg)) scale(.7); }
  14%  { opacity:1; transform:rotate(var(--av-giro,0deg)) scale(1); }
  74%  { opacity:1; transform:rotate(var(--av-giro,0deg)) scale(1); }
  92%  { opacity:0; left:var(--av-x2); top:var(--av-y2); transform:rotate(var(--av-giro,0deg)) scale(.75); }
  100% { opacity:0; left:var(--av-x2); top:var(--av-y2); transform:rotate(var(--av-giro,0deg)) scale(.75); }
}
@media (prefers-reduced-motion: reduce){
  .route-board.mapa-visible .route-avion{ animation:none; opacity:0; }
}

/* ── Los rótulos del vuelo ───────────────────────────────────────────
   "CR" acompaña al avión en la salida y se apaga en cuanto arranca: no
   hace falta decir de dónde viene algo que se está viendo salir. El
   destino se enciende al posarse, que es el momento en que la frase
   tiene sentido. Los dos siguen el mismo reloj que el avión. */
.route-vuelo{
  position:absolute; z-index:3; pointer-events:none;
  transform:translate(-50%,-50%);
  font-family:var(--mono, 'Oswald', system-ui, sans-serif);
  font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--gold,#D9A441);
  padding:4px 8px; border-radius:999px;
  background:rgba(20,28,14,.72);
  border:1px solid rgba(217,164,65,.34);
  opacity:0;
}
/* El pin de salida está al 10% del ancho: un rótulo centrado se salía por
   el borde. Se ancla junto al pin y crece hacia dentro del mapa. */
.route-vuelo.es-origen { margin-top:-24px; transform:translate(-8%,-50%); }
.route-vuelo.es-destino{ margin-top:-26px; }

.route-board.mapa-visible .route-vuelo.es-origen{
  animation: ttRotuloSale 2.8s cubic-bezier(.45,0,.35,1) 1.6s 1 forwards;
}
.route-board.mapa-visible .route-vuelo.es-destino{
  animation: ttRotuloLlega 2.8s cubic-bezier(.45,0,.35,1) 1.6s 1 forwards;
}
/* Mismo 2,8s y mismo retraso que el avión: así el "CR" se apaga justo
   cuando despega y el destino aparece justo cuando aterriza. */
@keyframes ttRotuloSale{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.9); }
  8%   { opacity:1; transform:translate(-50%,-50%) scale(1); }
  26%  { opacity:1; }
  40%  { opacity:0; transform:translate(-50%,-50%) scale(.94); }
  100% { opacity:0; }
}
@keyframes ttRotuloLlega{
  0%, 72% { opacity:0; transform:translate(-50%,-50%) scale(.9); }
  86%     { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%    { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* Perú aprieta seis paradas en el sur del país; con los pines a 34px se
   pisaban de a pares. A 28 y con las posiciones abiertas, el más cercano
   queda a 28,3px: no se tocan. */
.tour-route-map.is-peru .route-dot:not(.is-origin){
  width:28px; height:28px; font-size:12.5px;
}

@media (prefers-reduced-motion: reduce){
  .route-board.mapa-visible .route-vuelo{ animation:none; opacity:0; }
}

/* ── Los dos mapas, con la misma geometría ───────────────────────────
   Comparados en el mismo teléfono, Ecuador y Perú no coincidían:

     Ecuador  343×274  proporción 1.25   pines de 22px
     Perú     343×249  proporción 1.375  pines de 28px

   La proporción de Ecuador venía de una regla que lo hacía "más alto
   para que la silueta se vea GRANDE", pero su imagen es 11/8 (1.375),
   así que la silueta quedaba centrada dentro de una caja más alta y las
   seis paradas caían unos 12px por debajo del país. Es el mismo defecto
   que rompió el mapa hace dos tandas, en pequeño y desde antes.

   Ambos pasan a 11/8, que es la proporción real de las dos imágenes, y a
   pines de 28px. Verificado: con esa geometría la separación mínima de
   Ecuador es de 28,4px y la de Perú de 28,3px — ninguno se toca. */
@media(max-width:900px){
  .tour-journey .route-map{ aspect-ratio:11/8; }
  .tour-journey .route-dot:not(.is-origin){
    width:28px; height:28px; font-size:12.5px;
  }
}

/* ── El resplandor del pin de partida, en los dos mapas ──────────────
   Comparando las dos páginas, el pin del avión sale distinto:

     Ecuador  anillo oscuro + resplandor dorado de 14px
     Perú     sólo un anillo tenue de 3px, sin resplandor

   En Perú la sombra la pisa una regla general que alcanza a TODOS los
   pines, así que en vez de perseguirla se define aquí el estado bueno
   con especificidad suficiente para ganar en ambos. Es el punto del que
   sale el viaje: merece el destello. */
.route-board .route-map .route-dot.is-origin{
  box-shadow:
    0 0 0 3px rgba(31,40,24,.6),
    0 6px 14px rgba(217,164,65,.4),
    0 0 22px rgba(217,164,65,.35);
}

/* ── El rótulo del destino ya no se queda encima del mapa ────────────
   Con opacity:1 al final y fill forwards, "QUITO, ECUADOR" se quedaba
   puesto para siempre tapando las paradas 3 y 5 — en Perú tapaba la 6.
   Cumple su momento narrativo al aterrizar y después se retira, igual
   que el de salida. */
.route-board.mapa-visible .route-vuelo.es-destino{
  animation: ttRotuloLlegaYSeVa 5.6s cubic-bezier(.45,0,.35,1) 1.6s 1 forwards;
}
@keyframes ttRotuloLlegaYSeVa{
  0%, 36% { opacity:0; transform:translate(-50%,-50%) scale(.9); }
  43%     { opacity:1; transform:translate(-50%,-50%) scale(1); }
  78%     { opacity:1; transform:translate(-50%,-50%) scale(1); }
  92%     { opacity:0; transform:translate(-50%,-50%) scale(.96); }
  100%    { opacity:0; }
}

/* ── Chips del hero, v2 ──────────────────────────────────────────────
   Antes eran texto suelto con pipes "|" y emojis: el 📅 salía azul de
   sistema, y la bandera 🇨🇷 se dibuja como las letras "CR" en Windows y
   en buena parte de Android — ése era el "CR" pegado a GUÍA TICO que se
   veía en el hero de Perú. Los emojis no se controlan; los SVG sí.

   Ahora son píldoras con vidrio oscuro e icono de línea dorado, y entran
   escalonadas después del titular. */
.tour-hero .tour-meta{
  font-size:12px; gap:8px; letter-spacing:.12em;
}
.tour-hero .tour-meta .meta-item{
  font-size:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border-radius:999px;
  background:rgba(20,28,14,.55);
  border:1px solid rgba(217,164,65,.34);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:rgba(242,235,221,.94);
  white-space:nowrap;
}
.tour-hero .tour-meta .meta-item .mi{
  width:15px; height:15px; flex:none;
  stroke:var(--gold,#D9A441); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
/* El rediseño del hero metía un "·" entre items por pseudo-elemento y
   ponía el contenedor a font-size:0; ya no aplican. */
.tour-hero.is-redesign .tour-meta{ font-size:12px; }
.tour-hero.is-redesign .tour-meta .meta-item::before,
.tour-hero.is-redesign .tour-meta .meta-item::after{ content:none !important; }

@keyframes ttChip{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
.tour-hero .tour-meta .meta-item{
  animation: ttChip .5s cubic-bezier(.23,1,.32,1) backwards;
}
.tour-hero .tour-meta .meta-item:nth-child(1){ animation-delay:.55s }
.tour-hero .tour-meta .meta-item:nth-child(2){ animation-delay:.67s }
.tour-hero .tour-meta .meta-item:nth-child(3){ animation-delay:.79s }
.tour-hero .tour-meta .meta-item:nth-child(4){ animation-delay:.91s }
@media (prefers-reduced-motion: reduce){
  .tour-hero .tour-meta .meta-item{ animation:none; }
}

/* ── "Con quién viajás": personas reales, en riel horizontal ────────
   La primera versión eran tres tarjetas de ROLES con icono — a Edwin no le
   gustó, y tenía razón: los roles son genéricos, las personas convencen.
   Ahora es un riel horizontal de perfiles con foto, nombre, rol y dos
   líneas de historia. Arranca con el fundador — nombre, cargo, foto y
   cifras ya publicados en el propio sitio — y crece con cada guía que
   Edwin mande (foto + nombre + rol + 2 líneas). Nada inventado. */
/* Pista de deslizar: en pantalla chica solo asoma la segunda tarjeta y
   nadie adivina que el riel se mueve. Mismo lenguaje que el home
   ("Deslizá para descubrir"), con la flecha empujando hacia el lado
   por donde llega lo que falta. En escritorio las tres se ven: fuera. */
.equipo-hint{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold,#D9A441);
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:2px 0 12px;
}
.equipo-hint::before{ content:'←'; animation:epHintNudgeIzq 1.6s ease-in-out infinite; }
.equipo-hint::after{ content:'→'; animation:epHintNudge 1.6s ease-in-out infinite; }
@keyframes epHintNudge{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
@keyframes epHintNudgeIzq{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-6px)} }
@media(min-width:980px){ .equipo-hint{ display:none; } }
@media(prefers-reduced-motion:reduce){ .equipo-hint::before, .equipo-hint::after{ animation:none; } }

.equipo-riel{
  display:flex; gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:6px 4px 14px; margin:6px auto 44px;
  max-width:1080px;
  scrollbar-width:none;
}
.equipo-riel::-webkit-scrollbar{ display:none; }
.equipo-persona{
  flex:0 0 min(74vw, 300px); scroll-snap-align:start;
  background:rgba(242,235,221,.05);
  border:1px solid rgba(217,164,65,.25);
  border-radius:18px; overflow:hidden;
}
.ep-foto{ aspect-ratio:1/1; background:#141c0e; }
.ep-foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block; }
/* Edwin es la foto más vertical: su cabeza subía menos que la del resto.
   Reencuadrada para alinear la cabeza con los demás guías. */
.ep-foto img[src*="edwin-marin"]{ object-position:50% 77%; }
.ep-cuerpo{ padding:15px 18px 18px; }
/* Sin el bloque de precio debajo, el riel cierra la sección: menos cola. */
#inversion.tour-pricing{ padding-bottom:56px; }
#inversion .equipo-riel{ margin-bottom:8px; }
@media(max-width:900px){ #inversion.tour-pricing{ padding-bottom:40px; } }
.equipo-persona h3{
  /* La página uppercasea todos los h3 (regla global h1-h4) y los nombres
     salían en versalitas condensadas ilegibles — "EDWIN MARÍN" apretado.
     Un nombre propio se lee en caja normal y en la sans del sitio. */
  font-family:var(--sans,'Hanken Grotesk',system-ui,sans-serif);
  text-transform:none; letter-spacing:.01em;
  font-weight:700; font-size:20px; line-height:1.2;
  color:#F2EBDD; margin:0 0 4px;
}
.ep-rol{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold,#D9A441);
  display:block; margin-bottom:10px;
}
.equipo-persona p{
  font-size:14px; line-height:1.6;
  color:rgba(242,235,221,.75); margin:0;
}
/* Tres perfiles: en escritorio caben en fila y se centran; en teléfono el
   riel se desliza con snap, una tarjeta por vista más el asomo de la que
   sigue — la señal de que hay más. */
@media(min-width:980px){
  .equipo-riel{ justify-content:center; overflow-x:visible; }
  .equipo-persona{ flex-basis:320px; }
}

/* La letra chica bajo el botón de reservar: el dato justo, una vez. */
.reserve-fineprint{
  display:block; margin-top:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:rgba(242,235,221,.6);
}

/* ── El WhatsApp se aparta del botón grande de reservar ──────────────
   En el screenshot de Edwin el flotante verde quedaba montado sobre la
   esquina de RESERVAR TU ESPACIO — dos llamadas a la acción una encima
   de la otra, y la que tapaba era la secundaria. Mientras la tarjeta de
   reserva está a la vista, el flotante se desvanece; al salir, vuelve. */
body.reserva-a-la-vista .wa-float{
  opacity:0; pointer-events:none;
}
.wa-float{
  transition: opacity .25s ease, transform .26s cubic-bezier(.23,1,.32,1);
}

/* Los iconos de las pestañas también eran emoji (🗺 y 📅): el calendario
   salía azul de sistema y desentonaba con el interruptor dorado. Pasan a
   SVG de línea, heredando el color del estado de la pestaña. */
.journey-tab .ico{ display:inline-flex; }
.journey-tab .ico svg{
  width:15px; height:15px;
  stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* ── Cinturón y tirantes para la tarjeta del equipo ──────────────────
   La tarjeta estuvo enganchada al sistema de revelado por scroll
   (cin-reveal, opacity:0 hasta que un IntersectionObserver dispara) y a
   Edwin le desapareció la sección en su dispositivo: el observador no
   llegó a encender la tarjeta y quedó invisible para siempre. Se sacó
   del sistema — y por si algún HTML cacheado todavía le pone la clase,
   esta regla la mantiene visible pase lo que pase. Un perfil de equipo
   no puede depender de una animación para existir. */
.equipo-persona.cin-reveal{
  opacity:1 !important;
  transform:none !important;
}


/* ── Hero v3: fundido limpio, respiracion Ken Burns y rotulo de lugar ──
   El crossfade viejo bajaba la foto saliente MIENTRAS subia la entrante:
   1.5 de cada 5 segundos se veian dos imagenes semitransparentes
   mezcladas sobre el verde (la "sopa" de la captura de Edwin). Ahora la
   saliente se queda opaca debajo (.prev) y la nueva se disuelve encima:
   disolvencia de cine, nunca barro. Cada foto ademas "asienta" con un
   zoom-out sutil, y un rotulo abajo dice que lugar es — la imagen deja
   de ser papel tapiz y pasa a contar el itinerario. */
.hero-slides .hero-slide{ transition:opacity 1200ms ease; z-index:0; }
.hero-slides .hero-slide.prev{ opacity:1 !important; z-index:1; transition:none; }
.hero-slides .hero-slide.active{ z-index:2; }
.hero-slides .hero-slide.active img{ animation: ttHeroKB 7.5s ease-out forwards; }
@keyframes ttHeroKB{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

.hero-lugar{
  position:absolute; z-index:3; pointer-events:none; margin:0;
  left:clamp(20px,5vw,64px); bottom:clamp(64px,9vh,92px);
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(242,235,221,.92);
  display:flex; align-items:center; gap:10px;
  text-shadow:0 1px 8px rgba(10,14,8,.6);
}
.hero-lugar::before{ content:''; width:26px; height:1px; background:var(--gold,#D9A441); flex:0 0 auto; }
.hero-lugar span{ display:block; transition:opacity 450ms ease, transform 450ms ease; }
.hero-lugar.cambia span{ opacity:0; transform:translateY(4px); }

/* Entrada escalonada del texto del hero; los chips ya entran en .55s+,
   asi que esta cascada termina justo cuando ellos arrancan. */
/* El titulo entra ENFOCANDO desde el blur, como EXPLORA SUDAMERICA
   en el home — a Edwin le gusto esa y pidio la misma familia aqui. */
@keyframes ttHeroEntra{ from{ opacity:0; transform:translateY(16px); filter:blur(14px); } to{ opacity:1; transform:none; filter:blur(0); } }

/* Chips del hero en movil: antes flotaban a ancho de su texto y "GRUPO
   MAX 25" quedaba atravesada a media fila. Cuadricula pareja de 2x2. */
@media(max-width:767px){
  .tour-hero .tour-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .tour-hero .tour-meta .meta-item{ width:100%; justify-content:flex-start; font-size:10.5px; letter-spacing:.1em; padding:11px 12px; white-space:nowrap; }
}
.tour-hero .tour-hero-eyebrow, .tour-hero h1, .tour-hero .hero-rule{
  animation: ttHeroEntra .7s cubic-bezier(.22,1,.36,1) backwards;
}
.tour-hero .tour-hero-eyebrow{ animation-delay:.1s }
.tour-hero h1{ animation-delay:.24s }
.tour-hero .hero-rule{ animation-delay:.42s }

@media (prefers-reduced-motion: reduce){
  .hero-slides .hero-slide.active img{ animation:none; }
  .tour-hero .tour-hero-eyebrow, .tour-hero h1, .tour-hero .hero-rule{ animation:none; }
  .hero-lugar span{ transition:none; }
}


/* ============================================================
   CAJITAS DEL ACORDEON "LO QUE INCLUYE" — COMPARTIDAS
   Este bloque vivia solo como CSS inline de ecuador.html (29 reglas);
   peru.html quedaba con el estilo base sin pulir y la "Informacion
   practica" salia sin su cajita, como reporto Edwin. Ahora es de todos
   los tours. En ecuador.html sigue existiendo el duplicado inline
   identico: inofensivo, gana quien llegue ultimo con lo mismo.
   ============================================================ */
/* ═══ FIX 36 — Mejora tipografía + espaciado en "LO QUE INCLUYE" ═══ */
.tour-included{padding:var(--pad-l) 0;background:var(--rock)}@media(max-width:800px){.tour-included{padding:var(--pad-s) 0}}

/* Acordeón base: contenedor + items */
.inc-accordion{display:flex;flex-direction:column;gap:24px;margin-top:56px}

/* Escritorio: las dos listas caben lado a lado. Comparar lo que entra contra
   lo que no entra de un vistazo vale mucho más que dos cajones apilados que
   hay que abrir de a uno. La información práctica, que es secundaria, ocupa
   el ancho completo debajo. En móvil sigue siendo acordeón: ahí el espacio
   manda y solo "qué incluye" viene abierto. */
@media(min-width:900px){
  .inc-accordion{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .inc-acc-item.info{grid-column:1 / -1}
  .inc-acc-item.preguntas{grid-column:1 / -1}
}
.inc-acc-item{border-radius:var(--radius-l);overflow:hidden;transition:box-shadow .3s var(--ease)}
.inc-acc-item.yes{background:#5C6938;border:1px solid rgba(92,105,56,.4)}
.inc-acc-item.no{background:#F2EBDD;border:1px solid rgba(232,223,201,.6)}
.inc-acc-item.info{background:rgba(217,164,65,.08);border:1px solid rgba(217,164,65,.2)}
.inc-acc-item.preguntas{background:rgba(92,105,56,.08);border:1px solid rgba(92,105,56,.22)}

/* Encabezado acordeón: botón */
.inc-acc-head{
  width:100%;text-align:left;
  display:flex;align-items:center;gap:18px;
  padding:28px 36px;cursor:pointer;
  font-size:18px;font-weight:700;letter-spacing:.02em;
  transition:background .25s,color .25s;
  user-select:none;
}
.inc-acc-item.yes .inc-acc-head{color:#FFF;background:rgba(31,40,24,.06)}
.inc-acc-item.no .inc-acc-head{color:#1F2818;background:rgba(232,223,201,.3)}
.inc-acc-item.info .inc-acc-head{color:#1F2818;background:rgba(217,164,65,.04)}
.inc-acc-head:hover{
  .inc-acc-item.yes &{background:rgba(31,40,24,.12)}
  .inc-acc-item.no &{background:rgba(232,223,201,.45)}
  .inc-acc-item.info &{background:rgba(217,164,65,.08)}
}

/* Mark (✓ o ✕ o ℹ) */
.inc-acc-head .mark{
  flex-shrink:0;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:18px;font-weight:700;
}
.inc-acc-item.yes .mark{background:rgba(255,255,255,.2);color:#FFF}
.inc-acc-item.no .mark{background:rgba(255,102,102,.15);color:#C53030}
.inc-acc-item.info .mark svg{width:20px;height:20px;color:rgba(217,164,65,.7)}

/* ============================================================
   "Lo que incluye" — densidad en móvil + el icono de info
   ------------------------------------------------------------
   Las cabeceras medían 92px cada una: una barra del alto de un
   pulgar y medio para una sola etiqueta. Tres apiladas eran
   285px de pantalla antes de leer nada. Bajan a ~64px.

   Y el icono de "Información práctica" salía como un punto
   negro: el SVG no declaraba fill ni stroke, así que el
   navegador lo rellenaba de negro por defecto.
   ============================================================ */
.inc-acc-item.info .mark{
  background:rgba(217,164,65,.15);
  color:#D9A441;
}
.inc-acc-item.info .mark svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

@media(max-width:900px){
  .inc-accordion{gap:12px}
  .inc-acc-head{padding:18px 20px;gap:14px;font-size:17px}
  .inc-acc-head .mark{width:30px;height:30px;font-size:15px}
  .inc-acc-head .acc-toggle{width:28px;height:28px;font-size:17px}
  .inc-acc-item.info .mark svg{width:17px;height:17px}
}


/* Toggle icon */
.acc-toggle{flex-shrink:0;font-size:24px;line-height:1;transition:transform .35s var(--ease);margin-left:auto}
.inc-acc-head[aria-expanded="true"] .acc-toggle{transform:rotate(45deg)}

/* Body del acordeón: contenido expandible */
.inc-acc-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.inc-acc-body-inner{padding:0 36px 32px;padding-top:8px}

/* ============================================================
   Acordeón "Lo que incluye" — apertura y cierre
   ------------------------------------------------------------
   Intenté hacerlo con grid-template-rows 0fr↔1fr y no se puede
   acá: con overflow:hidden en el hijo, 1fr resuelve a 0 y la
   tarjeta no crece; sin él, el mínimo automático del grid impide
   que 0fr baje de la altura del contenido y no cierra. Las dos
   mitades del truco se estorban.

   Así que vuelve max-height, pero medido: el JS le pone la altura
   real del contenido al abrir, en vez del 9999px de antes. Ese
   9999px era el problema original — al cerrar, casi toda la
   animación se gastaba colapsando espacio vacío que ya nadie ve,
   y el panel parecía quedarse colgado y después pegar un tirón.

   El cierre (200ms) va más rápido que la apertura (260ms): al
   abrir la persona está leyendo lo que aparece, al cerrar ya
   decidió y sólo quiere que se quite.
   ============================================================ */
.inc-acc-body{
  display:block;
  max-height:0;
  overflow:hidden;
  transition:max-height 200ms cubic-bezier(.23,1,.32,1);
}
.inc-acc-item.is-open .inc-acc-body{transition-duration:260ms}
.inc-acc-body > .inc-acc-body-inner{min-height:auto;overflow:visible}

/* El "+" gira a "×". 350ms era más lento que el propio panel. */
.acc-toggle{transition:transform 200ms cubic-bezier(.23,1,.32,1)}

/* La cabecera es un botón del ancho de la pantalla y no acusaba recibo
   del toque. Un .99 basta: en una barra tan ancha un .97 se ve como un salto. */
.inc-acc-head{transition:background .25s,color .25s,transform 160ms cubic-bezier(.23,1,.32,1)}
.inc-acc-head:active{transform:scale(.99)}

@media (prefers-reduced-motion:reduce){
  .inc-acc-body,.inc-acc-item.is-open .inc-acc-body,
  .acc-toggle,.inc-acc-head{transition-duration:1ms}
}



/* Lista de items dentro del acordeón */
.inc-list{display:flex;flex-direction:column;gap:16px;list-style:none;padding:0;margin:0}
.inc-list li{
  font-size:15px;line-height:1.7;color:inherit;
  padding-left:0;margin:0;
  .inc-acc-item.yes &{color:rgba(255,255,255,.92)}
  .inc-acc-item.no &{color:#3F4825}
}

/* Grid de tarjetas prácticas (info section) */
.info-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  padding:4px 0;
}
@media(max-width:1000px){.info-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.info-grid{grid-template-columns:1fr}}

.prac-card{
  display:flex;flex-direction:column;gap:14px;
  text-align:left;
}
.prac-icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(217,164,65,.12);border-radius:12px;
  color:var(--gold);
}
.prac-icon svg{width:32px;height:32px}
.prac-card h3{
  font-size:18px;font-weight:700;color:#1F2818;
  font-family:var(--serif);letter-spacing:-.01em;margin:0;
}
.prac-card p{
  font-size:14px;line-height:1.7;color:#5C6938;margin:0;
}

/* Nota final */
.inc-note{
  text-align:center;margin-top:56px;
  font-size:15px;color:#5C6938;line-height:1.6;
}
.inc-note a{color:#D17F1E;font-weight:600;transition:color .2s}
.inc-note a:hover{color:#B86F1A}


/* ============================================================
   SALIDAS v4 — tarjeta premium invertida
   El v3 (crema con borde) no hizo "wow". Giro completo: tarjetas en
   olivo profundo sobre la seccion crema — el mismo contraste que hace
   funcionar las tarjetas de destinos del home — con filo superior de
   gradiente, brillo dorado sutil en la esquina, fecha en crema grande,
   precio en dorado, chips adaptados al fondo oscuro. Y el RESERVAR,
   que en v3 quedo "demasiado grande": pildora a la medida de su texto,
   esbelta, con el latido de la familia VER TOUR.
   ============================================================ */
/* Los :has() por estado del template (confirmed/quoting) pintaban su
   propio fondo CLARO con especificidad 0,4,0 y le ganaban al olivo:
   quedaba fecha crema sobre tarjeta crema — el "no se leen las fechas"
   que reporto Edwin en Peru. Este grupo (0,5,0) cubre todos los estados. */
.dep-slider .dep-track .dep-row,
.dep-slider .dep-track .dep-row:has(.dep-status.confirmed),
.dep-slider .dep-track .dep-row:has(.dep-status.quoting),
.dep-slider .dep-track .dep-row:has(.dep-status.coming){
  background:
    linear-gradient(90deg,#E7B85F,#D9A441 45%,#D17F1E) top/100% 3px no-repeat,
    radial-gradient(120% 90% at 85% -10%, rgba(217,164,65,.16), transparent 55%),
    linear-gradient(168deg,#26311b 0%,#1F2818 55%,#141c0e 100%);
  border:1px solid rgba(217,164,65,.42);
  border-radius:20px;
  box-shadow:0 26px 52px -22px rgba(20,28,14,.6);
}
.dep-slider .dep-track .dep-row .dep-date{ color:#F2EBDD; font-size:clamp(27px,6.4vw,34px); letter-spacing:.01em; }
.dep-slider .dep-track .dep-row .dep-hook{ color:rgba(242,235,221,.72); }
.dep-slider .dep-track .dep-row .dep-meta{ color:#E7C271; font-weight:600; opacity:1; }
.dep-slider .dep-track .dep-row .dep-status.confirmed{ background:rgba(96,190,120,.14); border-color:rgba(96,190,120,.45); color:#8FE2A4; }
.dep-slider .dep-track .dep-row .dep-status.quoting{ background:rgba(231,184,95,.14); border-color:rgba(231,184,95,.45); color:#E7C271; }
.dep-slider .dep-track .dep-row .dep-urgency.amber{ background:rgba(217,164,65,.16); border-color:rgba(217,164,65,.5); color:#E7C271; }
.dep-slider .dep-track .dep-row .dep-urgency.soft{ background:rgba(242,235,221,.08); border-color:rgba(242,235,221,.22); color:rgba(242,235,221,.78); }
.dep-slider .dep-track .dep-row .dep-urgency.soft::before{ background:rgba(242,235,221,.6); box-shadow:0 0 0 3px rgba(242,235,221,.12); }
.dep-slider .dep-row .dep-cta.primary{
  width:max-content; padding:11px 24px; font-size:12px;
  background:linear-gradient(160deg,#E7B85F 0%,#D9A441 45%,#D17F1E 100%);
  background-size:180% 180%;
  color:#1F2818; font-weight:800; letter-spacing:.14em;
  border-radius:999px;
  box-shadow:0 10px 22px -8px rgba(209,127,30,.55), inset 0 0 0 1px rgba(255,255,255,.3);
  animation:ctaLatidoDep 2.4s ease-in-out infinite;
}
@keyframes ctaLatidoDep{
  0%,100%{ background-position:0% 50%; box-shadow:0 8px 20px -6px rgba(209,127,30,.5), inset 0 0 0 1px rgba(255,255,255,.28); }
  50%    { background-position:100% 50%; box-shadow:0 12px 28px -6px rgba(209,127,30,.85), 0 0 0 4px rgba(217,164,65,.16), inset 0 0 0 1px rgba(255,255,255,.4); }
}
@media (prefers-reduced-motion: reduce){
  .dep-slider .dep-row .dep-cta.primary{ animation:none; }
}



/* ============================================================
   OTROS DESTINOS v2 — de frio a invitacion
   Edwin: "lo siento muy frio, no me invita a pasar" y en su telefono
   no se veia el pedacito de la siguiente tarjeta. Tarjeta con calor
   (marfil, borde dorado, sombra calida), foto que respira al tocar,
   chip de salida en gradiente, EXPLORAR con flecha que empuja, y el
   ancho movil baja a 82vw/330px para que el asomo exista en todos
   los telefonos, como en el riel de los guias. La pista "Desliza para
   ver mas destinos" reutiliza la misma .equipo-hint de los guias.
   ============================================================ */
.related-track .related-card{
  background:#FFFEFA;
  border:1px solid rgba(217,164,65,.35);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(31,40,24,.30);
}
@media(max-width:900px){
  .related-track .related-card{ width:82vw; max-width:330px; }
}
.related-img{ overflow:hidden; }
.related-img img{ transition:transform 3.5s cubic-bezier(.22,1,.36,1); }
.related-card:hover .related-img img,
.related-card:active .related-img img{ transform:scale(1.07); }
.related-tag{
  background:linear-gradient(160deg,#E7B85F,#D9A441 60%,#D17F1E);
  color:#1F2818; font-weight:700; border:none;
}
.related-meta .rel-cta{
  color:#A65F11; font-weight:700; letter-spacing:.1em;
  display:inline-flex; align-items:center;
}
.related-meta .rel-cta::after{
  content:'→'; margin-left:6px;
  animation:epHintNudge 1.6s ease-in-out infinite;
}
/* la flecha ya viene en el rotulo del span: la del texto se oculta y
   manda la animada, para no ver dos */
.related-meta .rel-cta{ font-feature-settings:normal; }
@media (prefers-reduced-motion: reduce){
  .related-meta .rel-cta::after{ animation:none; }
  .related-img img{ transition:none; }
}


/* ============================================================
   SALIDAS v4.1 — el precio y la lista de espera se hacen visibles
   El "espacio muerto" que vio Edwin entre el gancho y los cupos ERA el
   renglon del precio (7 dias · Desde $X): un :has() por estado del
   template lo pintaba olivo oscuro sobre la tarjeta oscura. Y el boton
   "Lista de espera" (.gold) quedaba transparente con texto oscuro por
   la demotion de jerarquia en filas quoting. Ambos, blindados a
   especificidad mayor y adaptados al fondo oscuro.
   ============================================================ */
.dep-slider .dep-track .dep-row .dep-meta,
.dep-slider .dep-track .dep-row:has(.dep-status.confirmed) .dep-meta,
.dep-slider .dep-track .dep-row:has(.dep-status.quoting) .dep-meta{
  color:#E7C271; font-weight:600; opacity:1;
}
.dep-slider .dep-track .dep-row:has(.dep-status.confirmed) .dep-meta strong,
.dep-slider .dep-track .dep-row:has(.dep-status.quoting) .dep-meta strong{
  color:#F2EBDD;
}
.dep-slider .dep-track .dep-row{ gap:12px; }
.dep-slider .dep-track .dep-row .dep-meta + .dep-urgency{ margin-top:2px; }
.dep-slider .dep-track .dep-row .dep-cta.gold,
.dep-slider .dep-track .dep-row:has(.dep-status.quoting) .dep-cta.gold{
  background:rgba(242,235,221,.07);
  border:1px solid rgba(217,164,65,.55);
  color:#E7C271;
  width:max-content; min-height:0; padding:11px 24px; font-size:12px;
  border-radius:999px;
}

/* ============================================================
   OTROS DESTINOS v3 — a la familia oscura de las salidas
   El v2 (marfil con borde) resulto tan timido que Edwin no vio mejora
   alguna, y el asomo de la siguiente tarjeta quedaba 3px FUERA de la
   pantalla (24px de padding + 330px + 24px de gap en un movil de 412).
   Ahora: tarjeta olivo profundo con filo dorado — la misma familia que
   las salidas v4 que si le gustaron — y aritmetica de asomo garantizada
   (20 + 300 + 16 deja 47-76px de la siguiente a la vista).
   ============================================================ */
.related-track .related-card{
  background:
    linear-gradient(90deg,#E7B85F,#D9A441 45%,#D17F1E) top/100% 3px no-repeat,
    linear-gradient(168deg,#26311b 0%,#1F2818 55%,#141c0e 100%);
  border:1px solid rgba(217,164,65,.42);
  box-shadow:0 26px 52px -22px rgba(20,28,14,.55);
}
.related-card .related-eyebrow{ color:#D9A441; }
.related-card .related-title{ color:#F2EBDD; }
.related-card .related-tagline{ color:rgba(242,235,221,.72); }
.related-card .related-meta{
  border-top:1px solid rgba(242,235,221,.14);
  color:#E7C271;
}
.related-meta .rel-cta{ color:#F2EBDD; }
@media(max-width:900px){
  .related-track{ gap:16px; padding-left:20px; padding-right:20px; scroll-padding-left:20px; }
  .related-track .related-card{ width:78vw; max-width:300px; }
}


/* ============================================================
   SALIDAS v4.2 — aire justo y sombra amable
   Tres cosas de la captura de Edwin: la sombra de las tarjetas oscuras
   era tan densa que se leia como un recuadro negro alrededor; la
   seccion cargaba colchones muertos arriba y abajo; y el subtitulo
   "Fechas confirmadas..." nacia pegado al "¿Cuando viajamos?".
   ============================================================ */
.dep-slider .dep-track .dep-row,
.dep-slider .dep-track .dep-row:has(.dep-status.confirmed),
.dep-slider .dep-track .dep-row:has(.dep-status.quoting),
.dep-slider .dep-track .dep-row:has(.dep-status.coming){
  box-shadow:0 14px 28px -16px rgba(31,40,24,.35);
}
.tour-departures{ padding:72px 0 56px; }
@media(max-width:800px){ .tour-departures{ padding:48px 0 36px; } }
.tour-departures .section-title em{ display:block; margin-top:14px; }
.tour-departures .related-slider, .tour-departures .dep-slider{ margin-top:22px; }
.tour-departures .dep-track{ padding-bottom:16px; }


/* OTROS DESTINOS v3.1 — la misma sombra amable que salidas v4.2
   (la densa se leia como recuadro negro tambien aqui, reporte de Edwin)
   y el asomo con la formula de los rieles de guias. */
.related-track .related-card{
  box-shadow:0 14px 28px -16px rgba(31,40,24,.35);
}
@media(max-width:900px){
  .related-track .related-card{ width:74vw; max-width:290px; }
}

/* ── Rotulo de origen del vuelo: keyframes que respetan su ancla ─────
   El rotulo "Costa Rica" se ancla junto al pin (translate(-8%,-50%))
   para crecer hacia adentro del mapa, pero los keyframes ttRotuloSale
   lo devolvian a translate(-50%,-50%): centrado sobre un pin al 10%
   del borde, medio rotulo quedaba FUERA y se veia cortado. Keyframes
   propios con el ancla correcta, y aire entre la cabecera y el mapa. */
@keyframes ttRotuloSaleOrigen{
  0%   { opacity:0; transform:translate(-8%,-50%) scale(.9); }
  8%   { opacity:1; transform:translate(-8%,-50%) scale(1); }
  26%  { opacity:1; }
  40%  { opacity:0; transform:translate(-8%,-50%) scale(.94); }
  100% { opacity:0; }
}
.route-board.mapa-visible .route-vuelo.es-origen{
  animation-name:ttRotuloSaleOrigen;
}
.tour-route-map .route-board{ margin-top:14px; }