/* ============================================================
TicoTrip — Tour page styles
Builds on assets/styles.css (design system)
============================================================ */
/* ============================================================
Breadcrumb (very subtle, above hero h1)
============================================================ */
.tour-breadcrumb{
display:flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:11px;letter-spacing:.18em;
color:rgba(250,250,247,.7);text-transform:uppercase;
margin-bottom:28px;
}
.tour-breadcrumb a{color:inherit;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .25s,color .25s}
.tour-breadcrumb a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.tour-breadcrumb .sep{opacity:.5}
.tour-breadcrumb .current{color:var(--rock);opacity:.95}
/* ============================================================
Tour Hero — 80vh with breadcrumb, meta-bar, price box
============================================================ */
.tour-hero{
position:relative;min-height:80vh;
color:var(--rock);overflow:hidden;
display:flex;align-items:flex-end;
padding:120px 0 96px;
isolation:isolate;
}
.tour-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.tour-hero-media > *{position:absolute;inset:0}
.tour-hero-media img,
.tour-hero-media video{width:100%;height:100%;object-fit:cover}
.tour-hero-media .ph{
width:100%;height:100%;
background:
linear-gradient(135deg, var(--olive-d) 0%, var(--olive) 60%, var(--olive-2) 100%),
repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 8px,transparent 8px 16px);
}
.tour-hero-overlay{
position:absolute;inset:0;z-index:1;
background:
linear-gradient(180deg,rgba(31,40,24,0) 0%,rgba(31,40,24,.35) 50%,rgba(31,40,24,.85) 100%),
linear-gradient(90deg,rgba(31,40,24,.55) 0%,rgba(31,40,24,.1) 60%),
linear-gradient(to top, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 55%);
}
.tour-hero-inner{
position:relative;z-index:2;
max-width:var(--maxw);margin:0 auto;width:100%;
padding:0 24px;
display:grid;grid-template-columns:1.45fr .85fr;gap:48px;align-items:end;
}
@media(min-width:900px){.tour-hero-inner{padding:0 48px}}
@media(max-width:900px){
.tour-hero-inner{grid-template-columns:1fr;gap:32px}
}
.tour-hero-eyebrow{
display:inline-block;
font-family:var(--mono);font-size:11px;letter-spacing:.22em;font-weight:600;
color:var(--gold);text-transform:uppercase;
padding-bottom:8px;border-bottom:1px solid var(--gold);
margin-bottom:24px;
}
.tour-hero h1{
color:var(--rock);
font-size:clamp(56px,9vw,128px);
line-height:.92;letter-spacing:-.025em;
margin:0 0 32px;
font-weight:500;
}
.tour-hero h1 em{display:block;color:var(--gold);font-weight:500;font-size:.6em;margin-top:8px}
/* Meta bar */
.tour-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
font-family:var(--mono);font-size:12px;letter-spacing:.1em;
color:rgba(250,250,247,.92);text-transform:uppercase;font-weight:600;
margin-bottom:24px;
}
.tour-meta .meta-item{display:inline-flex;align-items:center;gap:8px}
.tour-meta .meta-icon{font-size:15px;line-height:1}
.tour-meta .pipe{opacity:.4;color:var(--gold)}
/* Tag pills row */
.tour-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0}
.tour-pill{
display:inline-block;
padding:7px 13px;border-radius:100px;
font-family:var(--mono);font-size:11px;letter-spacing:.12em;font-weight:500;
background:rgba(250,250,247,.12);
color:rgba(250,250,247,.95);
border:1px solid rgba(250,250,247,.18);
backdrop-filter:blur(8px);
text-transform:uppercase;
}
/* Price box — cinematic glass */
.tour-pricebox{
background:rgba(31,40,24,.55);
color:var(--rock);
border-radius:24px;
padding:32px 34px;
display:flex;flex-direction:column;gap:14px;
position:relative;
border:1px solid rgba(242,235,221,.18);
backdrop-filter:blur(16px) saturate(115%);
-webkit-backdrop-filter:blur(16px) saturate(115%);
box-shadow:0 24px 60px -28px rgba(0,0,0,.75);
overflow:hidden;
isolation:isolate;
}
.tour-pricebox::before{
content:none;
}
.tour-pricebox::after{
content:none;
}
.tour-pricebox-from{
font-family:var(--mono);font-size:11px;letter-spacing:.24em;font-weight:600;
color:var(--gold);text-transform:uppercase;
}
.tour-pricebox-amount{
font-family:var(--serif);font-size:60px;line-height:1;font-weight:600;
color:var(--cream);letter-spacing:-.025em;
}
.tour-pricebox-amount .currency{font-size:.5em;vertical-align:top;margin-right:6px;color:var(--gold);font-weight:600;letter-spacing:0}
.tour-pricebox-note{font-size:13px;color:rgba(250,250,247,.7);margin:-2px 0 10px}
.tour-pricebox .btn{align-self:stretch;justify-content:center;padding:16px 22px;font-size:15px;background:#D17F1E;color:#fff;box-shadow:0 8px 20px -8px rgba(209,127,30,.55);transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.tour-pricebox .btn:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(209,127,30,.6)}
.tour-pricebox-fineprint{
font-family:var(--mono);font-size:10px;letter-spacing:.18em;
color:rgba(250,250,247,.55);text-align:center;margin-top:2px;text-transform:uppercase;
}
/* Scroll cue (reuse hero pattern) */
.tour-hero .scroll-cue{
position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
display:flex;flex-direction:column;align-items:center;gap:10px;
font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:rgba(250,250,247,.7);
text-transform:uppercase;
}
.tour-hero .scroll-cue .scroll-line{
width:1px;height:36px;background:linear-gradient(to bottom,rgba(217,164,65,.8),transparent);
animation:cuePulse 2.6s ease-in-out infinite;
}
@keyframes cuePulse{
0%,100%{transform:scaleY(1);opacity:.8}
50%{transform:scaleY(.55);opacity:.4}
}
/* ============================================================
Tour summary (cream) + horizontal gallery
============================================================ */
.tour-summary{padding:var(--pad-l) 0 var(--pad-m);background:var(--cream)}
@media(max-width:800px){.tour-summary{padding:var(--pad-s) 0 var(--pad-s)}}
.tour-summary .lead{
font-family:var(--serif);font-size:clamp(20px,2vw,26px);
line-height:1.5;color:var(--olive-d);max-width:62ch;
font-weight:400;
}
.tour-summary .lead em{color:var(--orange)}
/* ----- Photo carousel (autoplay + drag + arrows + dots) ----- */
.tour-gallery-wrap{
position:relative;
margin-top:48px;
}
@media(min-width:768px){.tour-gallery-wrap{margin-top:56px}}
@media(min-width:1024px){.tour-gallery-wrap{margin-top:64px}}
.tour-gallery{
display:flex; gap:12px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
padding:8px 16px 16px;
cursor:grab;
touch-action:pan-y; /* allow vertical page scroll, capture horizontal */
scrollbar-width:none;
-ms-overflow-style:none;
}
.tour-gallery::-webkit-scrollbar{display:none}
.tour-gallery.is-dragging{cursor:grabbing; scroll-behavior:auto; user-select:none}
.tour-gallery:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:8px}
@media(min-width:768px){.tour-gallery{gap:14px; padding:8px 32px 16px}}
@media(min-width:1024px){.tour-gallery{gap:16px; padding:8px 56px 16px}}
.tour-gallery-item{
flex:0 0 auto;
margin:0;
position:relative;
width:calc(100vw - 32px);
aspect-ratio:4/5;
max-height:70vh;
border-radius:16px;
overflow:hidden;
scroll-snap-align:center;
background:linear-gradient(135deg,var(--olive) 0%,var(--olive-d) 100%);
box-shadow:0 6px 24px rgba(31,40,24,.10);
transition:box-shadow .35s ease;
}
@media(min-width:768px){
.tour-gallery-item{
width:calc((100vw - 64px - 14px)/2);
aspect-ratio:16/9;
max-height:none;
height:420px;
scroll-snap-align:start;
}
}
@media(min-width:1024px){
.tour-gallery-item{
/* 2 full items + ~0.5 peek of 3rd */
width:calc((100vw - 112px - 32px)/2.5);
height:560px;
}
}
.tour-gallery-item:hover{box-shadow:0 12px 32px rgba(31,40,24,.18)}
.tour-gallery-item img{
width:100%;height:100%;object-fit:cover;
display:block;
user-select:none;
-webkit-user-drag:none;
pointer-events:none; /* let drag pass through to gallery */
}
.tour-gallery-item .ph{
width:100%;height:100%;
background:
linear-gradient(135deg,var(--olive) 0%,var(--olive-d) 100%),
repeating-linear-gradient(45deg,rgba(217,164,65,.06) 0 8px,transparent 8px 16px);
display:flex;align-items:flex-end;padding:20px;
font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(250,250,247,.6);
text-transform:uppercase;
}
.tour-gallery-caption{
position:absolute;left:0;right:0;bottom:0;
padding:56px 20px 18px;
font-family:Inter,system-ui,sans-serif;
font-size:13px;font-weight:500;letter-spacing:.01em;
color:#fff;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.75) 100%);
pointer-events:none;
text-transform:none;
}
@media(min-width:768px){.tour-gallery-caption{padding:64px 24px 20px;font-size:14px}}
@media(min-width:1024px){.tour-gallery-caption{padding:80px 28px 22px;font-size:15px}}
/* Arrows */
.tour-gallery-arrow{
position:absolute; top:50%; transform:translateY(-50%);
z-index:5;
width:52px;height:52px;border-radius:50%;
background:var(--cream); color:var(--olive);
border:none; cursor:pointer; padding:0;
box-shadow:0 6px 20px rgba(31,40,24,.18);
font-size:26px; line-height:1; font-weight:400;
display:none; align-items:center; justify-content:center;
transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
font-family:Inter,system-ui,sans-serif;
}
.tour-gallery-arrow span{display:block;margin-top:-3px}
@media(min-width:768px){
.tour-gallery-arrow{display:flex; left:4px}
.tour-gallery-arrow.next{left:auto; right:4px}
}
@media(min-width:1024px){
.tour-gallery-arrow{width:60px;height:60px;font-size:30px; left:14px}
.tour-gallery-arrow.next{left:auto; right:14px}
}
.tour-gallery-arrow:hover{
background:var(--orange); color:#fff;
transform:translateY(-50%) scale(1.05);
box-shadow:0 10px 28px rgba(209,127,30,.32);
}
.tour-gallery-arrow:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
.tour-gallery-arrow:active{transform:translateY(-50%) scale(.96)}
/* Dots */
.tour-gallery-dots{
display:flex;justify-content:center;gap:10px;margin-top:20px;
padding:0 16px;
flex-wrap:wrap;
}
.tour-gallery-dots button{
width:8px;height:8px;border-radius:50%;
background:rgba(31,40,24,.18);
border:none; cursor:pointer; padding:0;
transition:background .3s ease, width .3s ease, border-radius .3s ease;
}
.tour-gallery-dots button:hover{background:rgba(209,127,30,.55)}
.tour-gallery-dots button.active{
background:var(--orange);
width:22px; border-radius:4px;
}
.tour-gallery-dots button:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
/* Lightbox modal */
.tour-lightbox{
position:fixed;inset:0;z-index:1000;
background:rgba(10,10,8,.94);
display:flex;align-items:center;justify-content:center;
padding:24px;opacity:0;pointer-events:none;
transition:opacity .35s ease;
}
.tour-lightbox.is-open{opacity:1;pointer-events:auto}
.tour-lightbox-img{
max-width:90vw;max-height:80vh;
border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);
background:#222;
}
.tour-lightbox-close{
position:absolute;top:24px;right:24px;
width:44px;height:44px;border-radius:50%;
background:rgba(250,250,247,.12);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:22px;line-height:1;border:1px solid rgba(250,250,247,.2);
cursor:pointer;
}
.tour-lightbox-close:hover{background:rgba(250,250,247,.22)}
.tour-lightbox-prev,.tour-lightbox-next{
position:absolute;top:50%;transform:translateY(-50%);
width:56px;height:56px;border-radius:50%;
background:rgba(250,250,247,.1);color:#fff;border:1px solid rgba(250,250,247,.2);
display:flex;align-items:center;justify-content:center;
font-size:24px;cursor:pointer;
}
.tour-lightbox-prev{left:24px}
.tour-lightbox-next{right:24px}
.tour-lightbox-prev:hover,.tour-lightbox-next:hover{background:rgba(250,250,247,.2)}
.tour-lightbox-counter{
position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:rgba(250,250,247,.7);
}
/* ============================================================
Highlights — 3x2 grid
============================================================ */
.tour-highlights{padding:var(--pad-l) 0;background:var(--rock)}
@media(max-width:800px){.tour-highlights{padding:var(--pad-s) 0}}
.tour-highlights-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.tour-highlights-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tour-highlights-grid{grid-template-columns:1fr}}
.hl-card{
background:var(--rock);border:1px solid var(--cream-d);
padding:36px 28px 32px;border-radius:var(--radius-l);
transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease;
}
.hl-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-m);
border-color:rgba(217,164,65,.4);
}
.hl-icon{
width:56px;height:56px;border-radius:14px;
background:rgba(92,105,56,.08);
color:var(--olive);
display:flex;align-items:center;justify-content:center;
margin-bottom:24px;
}
.hl-icon svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.6;fill:none}
.hl-card h3{font-size:22px;margin-bottom:8px;color:var(--olive-d)}
.hl-card p{font-size:15px;line-height:1.55;color:var(--mist)}
/* ============================================================
Itinerary — accordion on olive
============================================================ */
.tour-itinerary{
padding:var(--pad-l) 0;
background:var(--olive);color:var(--rock);
position:relative;overflow:hidden;
}
.tour-itinerary::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(60% 50% at 90% 0%,rgba(217,164,65,.10),transparent 60%),
radial-gradient(40% 30% at 0% 100%,rgba(217,127,30,.06),transparent 60%);
pointer-events:none;
}
.tour-itinerary .container{position:relative}
@media(max-width:800px){.tour-itinerary{padding:var(--pad-s) 0}}
.day-list{display:flex;flex-direction:column;gap:14px;max-width:980px;margin:0 auto}
.day{
background:rgba(250,250,247,.04);
border:1px solid rgba(250,250,247,.10);
border-radius:var(--radius-l);
overflow:hidden;
transition:background .35s ease,border-color .35s ease;
}
.day.is-open{
background:rgba(250,250,247,.07);
border-color:rgba(217,164,65,.35);
box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.day-head{
display:flex;align-items:center;gap:24px;
width:100%;padding:24px 28px;cursor:pointer;
text-align:left;color:var(--rock);
}
.day-num{
flex:0 0 auto;
font-family:var(--mono);font-size:11px;letter-spacing:.2em;
color:var(--gold);text-transform:uppercase;font-weight:600;
min-width:72px;
}
.day-num strong{display:block;font-family:var(--serif);font-size:32px;color:var(--gold);font-weight:500;letter-spacing:-.01em;margin-top:2px}
.day-title{
flex:1;font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);font-weight:500;color:#fff;line-height:1.25;
}
.day-meals{
display:flex;align-items:center;gap:6px;
font-size:18px;opacity:.7;flex:0 0 auto;
}
.day-meals span{filter:grayscale(.3)}
.day-meals.active span{opacity:1;filter:none}
.day-toggle{
flex:0 0 auto;
width:36px;height:36px;border-radius:50%;
border:1px solid rgba(217,164,65,.5);
color:var(--gold);font-size:18px;line-height:1;
display:flex;align-items:center;justify-content:center;
transition:transform .35s ease,background .35s ease;
}
.day.is-open .day-toggle{transform:rotate(45deg);background:var(--gold);color:var(--olive-d)}
.day-body{
max-height:0;overflow:hidden;
transition:max-height .55s var(--ease);
}
.day.is-open .day-body{max-height:2400px}
.day-body-inner{
padding:8px 28px 32px;
display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:start;
}
@media(max-width:780px){.day-body-inner{grid-template-columns:1fr;gap:20px}}
.day-img{
aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
background:var(--olive-d);
position:relative;
}
.day-img img{width:100%;height:100%;object-fit:cover}
.day-img .ph{
width:100%;height:100%;
background:
linear-gradient(135deg,var(--olive-d),var(--olive-2)),
repeating-linear-gradient(45deg,rgba(217,164,65,.05) 0 8px,transparent 8px 16px);
display:flex;align-items:end;padding:14px;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(250,250,247,.5);
text-transform:uppercase;
}
.day-narrative{display:flex;flex-direction:column;gap:14px;color:rgba(250,250,247,.85);font-size:15.5px;line-height:1.65}
.day-narrative p{margin:0}
.day-activities{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.day-act{
display:inline-block;padding:5px 10px;border-radius:100px;
background:rgba(217,164,65,.14);color:var(--gold);
font-family:var(--mono);font-size:10px;letter-spacing:.12em;font-weight:600;
border:1px solid rgba(217,164,65,.3);text-transform:uppercase;
}
.day-transport{
display:inline-flex;align-items:center;gap:10px;
padding:8px 14px;border-radius:8px;
background:rgba(31,40,24,.5);
font-family:var(--mono);font-size:11px;letter-spacing:.1em;
color:rgba(250,250,247,.85);
border:1px dashed rgba(217,164,65,.3);
margin-top:10px;align-self:flex-start;text-transform:uppercase;
}
.day-transport::before{content:"→";color:var(--gold);font-size:14px}
/* ============================================================
Departures — date cards
============================================================ */
.tour-departures{padding:var(--pad-l) 0;background:var(--cream)}
@media(max-width:800px){.tour-departures{padding:var(--pad-s) 0}}
.dep-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.dep-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dep-grid{grid-template-columns:1fr}}
.dep-card{
background:var(--rock);
border:1px solid var(--cream-d);
border-radius:var(--radius-l);
padding:28px 28px 24px;
display:flex;flex-direction:column;gap:14px;
transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease;
position:relative;
}
.dep-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(217,164,65,.4)}
.dep-status{
align-self:flex-start;
display:inline-flex;align-items:center;gap:7px;
padding:6px 12px;border-radius:100px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;font-weight:700;
text-transform:uppercase;
border:1px solid transparent;
}
.dep-status.confirmed{background:rgba(31,128,76,.10);color:#1a6e40;border-color:rgba(31,128,76,.28)}
.dep-status.quoting{background:rgba(217,127,30,.12);color:#A65F11;border-color:rgba(217,127,30,.32)}
.dep-status.coming{background:rgba(122,122,117,.12);color:var(--mist);border-color:rgba(122,122,117,.28)}
.dep-date{
font-family:var(--serif);font-size:clamp(26px,2.4vw,32px);
font-weight:500;color:var(--olive-d);letter-spacing:-.01em;line-height:1.1;
}
.dep-hook{font-size:15px;color:var(--olive-2);line-height:1.5;margin:0}
.dep-meta{
font-family:var(--mono);font-size:11px;letter-spacing:.12em;
color:var(--mist);text-transform:uppercase;
border-top:1px solid var(--cream-d);padding-top:14px;
}
.dep-cta{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
margin-top:6px;padding:12px 16px;border-radius:100px;
font-family:var(--mono);font-size:12px;letter-spacing:.1em;font-weight:700;
text-transform:uppercase;text-align:center;
transition:transform .25s var(--ease),background .25s ease,color .25s ease,box-shadow .25s ease;
}
.dep-cta.primary{background:var(--orange);color:#fff;box-shadow:0 8px 24px rgba(209,127,30,.28)}
.dep-cta.primary:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:0 14px 32px rgba(209,127,30,.4)}
.dep-cta.gold{background:var(--gold);color:var(--olive-d);box-shadow:0 8px 24px rgba(217,164,65,.28)}
.dep-cta.gold:hover{background:#c9962f;transform:translateY(-2px)}
.dep-cta.muted{background:transparent;color:var(--olive-d);border:1px solid var(--cream-d)}
.dep-cta.muted:hover{background:var(--cream-d);border-color:var(--mist)}
/* ============================================================
Included / Not included
============================================================ */
.tour-included{padding:var(--pad-l) 0;background:var(--rock)}
@media(max-width:800px){.tour-included{padding:var(--pad-s) 0}}
.inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:780px){.inc-grid{grid-template-columns:1fr;gap:20px}}
.inc-col{
border-radius:var(--radius-l);padding:36px 32px 32px;
border:1px solid transparent;
}
.inc-col.yes{
background:linear-gradient(155deg,#3F4825 0%, #5C6938 100%);
color:#fff;
box-shadow:var(--shadow-m);
}
.inc-col.no{
background:var(--cream);
color:var(--olive-2);
border-color:var(--cream-d);
}
.inc-head{
display:flex;align-items:center;gap:12px;
font-family:var(--serif);font-size:24px;font-weight:500;
margin-bottom:24px;
padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.18);
}
.inc-col.no .inc-head{border-bottom-color:rgba(31,40,24,.12);color:var(--olive-d)}
.inc-head .mark{
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:16px;font-weight:700;
background:var(--gold);color:var(--olive-d);
}
.inc-col.no .inc-head .mark{background:rgba(209,127,30,.15);color:var(--orange)}
.inc-list{display:flex;flex-direction:column;gap:12px}
.inc-list li{
display:flex;align-items:flex-start;gap:12px;
font-size:15px;line-height:1.55;
}
.inc-list li::before{
content:"";flex:0 0 auto;width:18px;height:18px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
margin-top:2px;
background-repeat:no-repeat;background-position:center;background-size:11px;
}
.inc-col.yes .inc-list li::before{
background-color:var(--gold);
background-image:url("data:image/svg+xml;utf8,");
}
.inc-col.no .inc-list li::before{
background-color:rgba(209,127,30,.14);
background-image:url("data:image/svg+xml;utf8,");
}
.inc-note{
margin-top:32px;text-align:center;
font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mist);
text-transform:uppercase;
}
.inc-note a{color:var(--orange);border-bottom:1px solid currentColor}
/* ============================================================
Pricing — dark olive
============================================================ */
.tour-pricing{
padding:var(--pad-l) 0;
background:var(--olive-d);color:var(--rock);
position:relative;overflow:hidden;
}
.tour-pricing::before{
content:"";position:absolute;inset:0;
background:radial-gradient(50% 60% at 80% 30%,rgba(217,164,65,.10),transparent 70%);
}
.tour-pricing .container{position:relative}
@media(max-width:800px){.tour-pricing{padding:var(--pad-s) 0}}
.pricing-grid{
display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
margin-top:48px;
}
@media(max-width:780px){.pricing-grid{grid-template-columns:1fr;gap:32px}}
.price-amount{
font-family:var(--mono);font-size:11px;letter-spacing:.22em;
color:var(--gold);text-transform:uppercase;margin-bottom:8px;
}
.price-big{
font-family:var(--serif);font-size:clamp(72px,9vw,128px);
line-height:.92;font-weight:500;color:var(--gold);letter-spacing:-.02em;
margin-bottom:8px;
}
.price-big .currency{font-size:.45em;vertical-align:top;margin-right:8px;color:#fff;opacity:.8}
.price-note{color:rgba(250,250,247,.7);font-size:15px;margin-bottom:24px}
.price-divider{height:1px;background:linear-gradient(90deg,var(--gold),transparent);max-width:160px;margin:8px 0 16px}
.price-supplement{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:rgba(250,250,247,.85);text-transform:uppercase}
.price-supplement strong{color:var(--gold);font-weight:600}
.reserve-card{
background:linear-gradient(160deg,rgba(217,164,65,.06),rgba(217,164,65,.02));
border:1px solid rgba(217,164,65,.4);
border-radius:var(--radius-l);
padding:32px 32px 28px;
display:flex;flex-direction:column;gap:14px;
box-shadow:0 0 0 1px rgba(217,164,65,.15);
}
.reserve-card h3{
color:#fff;font-size:24px;margin:0;
display:flex;align-items:center;gap:10px;
}
.reserve-card h3::before{
content:"";width:8px;height:8px;border-radius:50%;
background:var(--gold);box-shadow:0 0 0 4px rgba(217,164,65,.2);
}
.reserve-list{display:flex;flex-direction:column;gap:8px;margin:4px 0 8px}
.reserve-list li{
display:flex;align-items:flex-start;gap:10px;
font-size:15px;color:rgba(250,250,247,.88);
}
.reserve-list li::before{
content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
background:var(--gold);margin-top:9px;
}
.reserve-card .btn{align-self:stretch;justify-content:center;margin-top:6px}
.price-cancel-note{
margin-top:32px;text-align:center;
font-family:var(--mono);font-size:11px;letter-spacing:.12em;
color:rgba(250,250,247,.5);text-transform:uppercase;
}
/* ============================================================
Practical info grid
============================================================ */
.tour-practical{padding:var(--pad-l) 0;background:var(--rock)}
@media(max-width:800px){.tour-practical{padding:var(--pad-s) 0}}
.prac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.prac-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.prac-grid{grid-template-columns:1fr}}
.prac-card{
background:var(--cream);
border:1px solid var(--cream-d);
border-radius:var(--radius-l);
padding:28px 28px 24px;
transition:transform .3s var(--ease),box-shadow .3s ease;
}
.prac-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-s)}
.prac-icon{
width:44px;height:44px;border-radius:12px;
background:rgba(92,105,56,.12);color:var(--olive);
display:flex;align-items:center;justify-content:center;
font-size:22px;margin-bottom:16px;
}
.prac-card h3{font-family:var(--serif);font-size:19px;margin-bottom:6px;color:var(--olive-d)}
.prac-card p{font-size:14px;line-height:1.55;color:var(--mist);margin:0}
/* ============================================================
Tour form — reuses .cotizar styling but cream variant
============================================================ */
.tour-form-section{padding:var(--pad-l) 0;background:var(--cream);position:relative}
@media(max-width:800px){.tour-form-section{padding:var(--pad-s) 0}}
.tour-form-section .section-head{margin-bottom:36px;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.tour-form-section .section-head .eyebrow{display:inline-block}
.tour-form-section .section-title{margin-left:auto;margin-right:auto}
.tour-form-section .section-sub{
margin-top:18px;font-size:17px;color:var(--olive-2);max-width:54ch;margin-left:auto;margin-right:auto;
}
.tour-form-wrap{
max-width:760px;margin:0 auto;
background:var(--rock);
border-radius:var(--radius-l);
padding:40px 40px 36px;
box-shadow:var(--shadow-m);
border:1px solid var(--cream-d);
}
@media(max-width:600px){.tour-form-wrap{padding:28px 22px 24px}}
/* ============================================================
Related tours
============================================================ */
.tour-related{padding:var(--pad-l) 0;background:var(--rock)}
@media(max-width:800px){.tour-related{padding:var(--pad-s) 0}}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.related-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.related-card{
background:var(--rock);border:1px solid var(--cream-d);
border-radius:var(--radius-l);overflow:hidden;
display:flex;flex-direction:column;
transition:transform .4s var(--ease),box-shadow .4s ease,border-color .4s ease;
}
.related-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:rgba(217,164,65,.4)}
.related-img{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--olive)}
.related-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.related-card:hover .related-img img{transform:scale(1.07)}
.related-img .ph{
width:100%;height:100%;
background:linear-gradient(135deg,var(--olive),var(--olive-d));
}
.related-tag{
position:absolute;top:16px;left:16px;
padding:6px 12px;border-radius:100px;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;font-weight:600;
background:rgba(250,250,247,.92);color:var(--olive-d);
text-transform:uppercase;backdrop-filter:blur(8px);
}
.related-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.related-eyebrow{
font-family:var(--mono);font-size:10px;letter-spacing:.18em;
color:var(--mist);text-transform:uppercase;
}
.related-title{font-family:var(--serif);font-size:28px;font-weight:500;color:var(--olive-d);letter-spacing:-.01em;margin:0}
.related-meta{
font-family:var(--mono);font-size:11px;letter-spacing:.12em;
color:var(--olive-2);text-transform:uppercase;
margin-top:auto;padding-top:14px;border-top:1px solid var(--cream-d);
display:flex;justify-content:space-between;align-items:center;
}
.related-meta a{color:var(--orange);font-weight:700}
/* ============================================================
Reveal animation utility (used by IntersectionObserver)
============================================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
/* ============================================================
Mobile fine-tuning
============================================================ */
@media(max-width:780px){
.tour-hero{min-height:auto;padding:120px 0 64px}
.tour-hero h1{font-size:clamp(48px,12vw,76px)}
.tour-pricebox{padding:22px 22px 20px;gap:12px}
.tour-pricebox-amount{font-size:48px}
.tour-pricebox .btn{padding:14px 18px;font-size:14.5px}
}
/* ============================================================
V2 — Dual ribbon marquees (replaces the legacy gallery)
============================================================ */
.tour-ribbons{
position:relative;
padding:36px 0 28px;
background:var(--cream);
overflow:hidden;
user-select:none;
}
@media(min-width:768px){.tour-ribbons{padding:48px 0 40px}}
.ribbon-track{
position:relative;
overflow:hidden;
margin:8px 0;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);
touch-action:pan-y;
}
.ribbon-strip{
display:flex;gap:14px;
width:max-content;
will-change:transform;
align-items:center;
}
@media(min-width:768px){.ribbon-strip{gap:18px}}
.ribbon-item{
flex:0 0 auto;
margin:0;position:relative;
width:300px;height:200px;
border-radius:14px;
overflow:hidden;
background:linear-gradient(155deg,#5C6938 0%,#3F4825 55%,#1F2818 100%);
box-shadow:0 6px 22px rgba(31,40,24,.12);
}
@media(min-width:768px){
.ribbon-item{width:420px;height:280px}
}
.ribbon-item img{
width:100%;height:100%;object-fit:cover;display:block;
pointer-events:none;-webkit-user-drag:none;user-select:none;
}
.ribbon-item .ph{
position:absolute;inset:0;
background:
linear-gradient(155deg,#5C6938 0%,#3F4825 55%,#1F2818 100%),
repeating-linear-gradient(45deg,rgba(217,164,65,.06) 0 8px,transparent 8px 16px);
display:flex;align-items:flex-end;padding:18px;
font-family:var(--mono);font-size:11px;letter-spacing:.16em;
color:rgba(250,250,247,.7);text-transform:uppercase;
}
.ribbon-item::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(31,40,24,0) 55%,rgba(31,40,24,.55) 100%);
pointer-events:none;
}
.ribbon-caption{
position:absolute;left:18px;right:18px;bottom:14px;
font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
color:#fff;text-transform:uppercase;
text-shadow:0 1px 8px rgba(0,0,0,.4);
z-index:2;
}
/* Custom cursor removed — using system cursor */
/* ============================================================
Mobile gallery — single swipeable carousel (<768px)
Replaces the dual marquee with native scroll-snap.
============================================================ */
@media(max-width:767px){
.tour-ribbons{
padding:24px 0 20px;
overflow:visible;
}
/* Hide the second ribbon-track entirely */
.tour-ribbons .ribbon-track + .ribbon-track{display:none}
.tour-ribbons .ribbon-track{
overflow-x:auto;
overflow-y:visible;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
/* pan-x only — vertical gestures pass through to the page so the
user never gets stuck scrolling past the photo carousel. */
touch-action:pan-x !important;
overscroll-behavior:auto;
scrollbar-width:none;
-ms-overflow-style:none;
scroll-padding:0 16px;
}
.tour-ribbons .ribbon-track::-webkit-scrollbar{display:none}
.tour-ribbons .ribbon-strip{
transform:none !important;
width:max-content;
gap:12px;
padding:0 16px;
align-items:stretch;
}
.tour-ribbons .ribbon-item{
flex:0 0 auto;
width:calc(100vw - 56px);
height:auto;
aspect-ratio:4/5;
max-height:72vh;
scroll-snap-align:center;
scroll-snap-stop:always;
border-radius:18px;
box-shadow:0 12px 28px rgba(31,40,24,.18);
}
.tour-ribbons .ribbon-caption{
left:16px;right:16px;bottom:14px;
font-size:10.5px;letter-spacing:.2em;
}
/* Dots indicator */
.ribbon-dots{
display:flex;justify-content:center;align-items:center;gap:8px;
margin-top:18px;padding:0 16px;flex-wrap:wrap;
}
.ribbon-dot{
width:7px;height:7px;border-radius:50%;
background:rgba(31,40,24,.18);
border:0;padding:0;cursor:pointer;
transition:background .3s ease, width .3s ease, border-radius .3s ease;
}
.ribbon-dot.active{
background:var(--gold);
width:22px;border-radius:4px;
}
.ribbon-dot:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
}
@media(min-width:768px){
.ribbon-dots{display:none}
}
/* ============================================================
V2 — Highlights cards with photo top
============================================================ */
.hl-card{
position:relative;
padding:0;
display:flex;flex-direction:column;
overflow:hidden;
}
.hl-card .hl-photo{
position:relative;
aspect-ratio:4/3;
overflow:hidden;
background:linear-gradient(155deg,#5C6938 0%,#3F4825 55%,#1F2818 100%);
}
.hl-card .hl-photo img{
width:100%;height:100%;object-fit:cover;
transition:transform 1s var(--ease);
}
.hl-card:hover .hl-photo img{transform:scale(1.05)}
.hl-card .hl-photo .ph{
position:absolute;inset:0;
background:
linear-gradient(155deg,#5C6938 0%,#3F4825 55%,#1F2818 100%),
repeating-linear-gradient(45deg,rgba(217,164,65,.05) 0 8px,transparent 8px 16px);
display:flex;align-items:flex-end;padding:22px;
}
.hl-card .hl-photo .ph .num{
position:absolute;top:18px;left:24px;
font-family:var(--serif);font-weight:500;
font-size:64px;line-height:.9;letter-spacing:-.02em;
color:rgba(217,164,65,.34);
}
.hl-card .hl-photo .ph .lbl{
position:relative;
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
color:rgba(250,250,247,.7);text-transform:uppercase;
}
.hl-card .hl-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(31,40,24,0) 45%,rgba(31,40,24,.55) 100%);
pointer-events:none;
}
.hl-card .hl-body{
padding:24px 26px 28px;
display:flex;flex-direction:column;gap:8px;
}
.hl-card .hl-body h3{margin:0;font-size:22px;color:var(--olive-d)}
.hl-card .hl-body p{font-size:15px;line-height:1.55;color:var(--mist);margin:0}
.hl-arrow{
position:absolute;top:14px;right:14px;z-index:2;
width:38px;height:38px;border-radius:50%;
background:rgba(250,250,247,.92);
color:var(--olive-d);
display:flex;align-items:center;justify-content:center;
font-size:16px;font-weight:500;
opacity:0;transform:translateX(-6px);
transition:opacity .3s ease, transform .3s var(--ease);
}
.hl-card:hover .hl-arrow{opacity:1;transform:none}
/* ============================================================
V2 — Practical info SVG icons
============================================================ */
.prac-card{
display:flex;flex-direction:column;
}
.prac-icon{
width:56px;height:56px;border-radius:50%;
background:var(--cream);
color:var(--olive);
display:flex;align-items:center;justify-content:center;
margin-bottom:16px;
font-size:0;
transition:transform .3s var(--ease), color .3s ease, background .3s ease;
}
.prac-icon svg{
width:28px;height:28px;
stroke:currentColor;stroke-width:1.5;
fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.prac-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-s)}
.prac-card:hover .prac-icon{color:var(--orange);background:#fff;transform:scale(1.04)}
/* ============================================================
V2 — Includes / Not includes accordion
============================================================ */
.inc-accordion{
display:flex;flex-direction:column;gap:14px;
}
.inc-acc-item{
border-radius:var(--radius-l);
overflow:hidden;
border:1px solid transparent;
}
.inc-acc-item.yes{
background:linear-gradient(155deg,#3F4825 0%,#5C6938 100%);
color:#fff;box-shadow:var(--shadow-s);
}
.inc-acc-item.no{
background:var(--cream);
border-color:var(--cream-d);
color:var(--olive-2);
}
.inc-acc-head{
display:flex;align-items:center;gap:16px;
width:100%;padding:22px 26px;cursor:pointer;
text-align:left;
font-family:var(--serif);font-size:22px;font-weight:500;
color:inherit;
}
.inc-acc-item.no .inc-acc-head{color:var(--olive-d)}
.inc-acc-head .mark{
flex:0 0 auto;
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:700;line-height:1;
}
.inc-acc-item.yes .mark{background:var(--gold);color:var(--olive-d)}
.inc-acc-item.no .mark{background:rgba(209,127,30,.15);color:var(--orange)}
/* Hint pulse — only the first "incluye" card pulses gently until the user touches it */
.inc-accordion .inc-acc-item:first-child{
animation: hintPulse 2.5s ease-in-out infinite;
}
.inc-accordion .inc-acc-item:first-child.touched,
.inc-accordion .inc-acc-item:first-child.is-open{
animation: none;
}
@keyframes hintPulse{
0%,100%{ box-shadow: 0 0 0 0 rgba(217,164,65,0); }
50% { box-shadow: 0 0 0 8px rgba(217,164,65,.15); }
}
@media(prefers-reduced-motion:reduce){
.inc-accordion .inc-acc-item:first-child{animation:none}
}
.inc-acc-head .label{flex:1}
.inc-acc-head .acc-toggle{
flex:0 0 auto;
width:36px;height:36px;border-radius:50%;
border:1px solid currentColor;
display:flex;align-items:center;justify-content:center;
font-size:18px;line-height:1;opacity:.7;
transition:transform .35s var(--ease), background .35s ease, opacity .35s ease;
}
.inc-acc-item.is-open .acc-toggle{transform:rotate(45deg);opacity:1}
.inc-acc-item.yes.is-open .acc-toggle{background:rgba(217,164,65,.18)}
.inc-acc-body{
max-height:0;overflow:hidden;
transition:max-height .55s var(--ease);
}
.inc-acc-item.is-open .inc-acc-body{max-height:1400px}
.inc-acc-body-inner{padding:0 26px 26px}
.inc-acc-item .inc-list{display:flex;flex-direction:column;gap:12px}
.inc-acc-item.no .inc-list li{color:var(--olive-2)}
/* ============================================================
V2 — Form: trip-type cards + room supplement notice
============================================================ */
.hab-notice{
margin:10px 0 0;
display:flex;align-items:center;gap:10px;
padding:10px 14px;
border-radius:10px;
background:rgba(217,164,65,.12);
border:1px solid rgba(217,164,65,.32);
font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
color:var(--gold);text-transform:uppercase;
}
.hab-notice::before{
content:"+";font-size:14px;font-weight:700;line-height:1;
width:18px;height:18px;border-radius:50%;
background:var(--gold);color:var(--olive-d);
display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.trip-type-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
margin-bottom:18px;
}
@media(max-width:640px){.trip-type-grid{grid-template-columns:1fr}}
.trip-type-card{
position:relative;display:block;cursor:pointer;
border-radius:var(--radius-l);
border:1.5px solid var(--cream-d);
background:#fff;
padding:22px 22px 20px;
transition:border-color .25s ease, background .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.trip-type-card:hover{border-color:rgba(217,164,65,.6);transform:translateY(-2px);box-shadow:var(--shadow-s)}
.trip-type-card input{position:absolute;opacity:0;pointer-events:none}
.trip-type-card .trip-eyebrow{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;
color:var(--orange);text-transform:uppercase;font-weight:600;
display:block;margin-bottom:8px;
}
.trip-type-card h4{
margin:0 0 8px;
font-family:var(--serif);font-size:20px;font-weight:500;
color:var(--olive-d);line-height:1.25;
}
.trip-type-card .trip-detail{
font-family:var(--mono);font-size:11px;letter-spacing:.1em;
color:var(--mist);text-transform:uppercase;
margin:0;
}
.trip-type-card .trip-check{
position:absolute;top:18px;right:18px;
width:24px;height:24px;border-radius:50%;
border:1.5px solid var(--cream-d);
display:flex;align-items:center;justify-content:center;
font-size:12px;color:#fff;background:transparent;
transition:background .25s ease, border-color .25s ease;
}
.trip-type-card input:checked ~ .trip-check,
.trip-type-card.is-checked .trip-check{
background:var(--gold);border-color:var(--gold);color:var(--olive-d);
}
.trip-type-card.is-checked{
border-color:var(--gold);
background:linear-gradient(160deg,rgba(217,164,65,.08),rgba(217,164,65,.02));
box-shadow:0 0 0 1px rgba(217,164,65,.25), var(--shadow-s);
}
.trip-mode-panel{margin-top:6px}
.trip-warn{
margin-top:12px;padding:14px 16px;
border-radius:12px;
background:rgba(209,127,30,.10);
border:1px solid rgba(209,127,30,.35);
color:var(--orange-d);
font-size:14px;line-height:1.5;
}
.trip-warn strong{color:var(--orange-d);font-weight:700}
/* ============================================================
V3 — Route map section (replaces ribbons)
============================================================ */
.tour-route-map{
position:relative;
padding:96px 0 112px;
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-route-map{padding:64px 0 72px}}
.tour-route-map::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%),
radial-gradient(1px 1px at 55% 12%, rgba(242,235,221,.10), transparent 60%);
background-size:100% 100%;
opacity:.7;pointer-events:none;
}
.tour-route-map .container{position:relative;z-index:1}
.route-head{
display:flex;flex-direction:column;align-items:center;gap:14px;
text-align:center;margin-bottom:52px;max-width:720px;margin-left:auto;margin-right:auto;
}
.route-pin-icon{
width:56px;height:56px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(217,164,65,.14);
border:1px solid rgba(217,164,65,.5);
box-shadow:0 0 0 6px rgba(217,164,65,.06);
}
.route-pin-icon svg{width:24px;height:24px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.route-eyebrow{
font-family:var(--mono);font-size:11px;letter-spacing:.24em;
color:var(--gold);text-transform:uppercase;font-weight:600;
}
.route-title{
font-family:var(--serif);font-weight:500;
font-size:clamp(28px,3.4vw,42px);
color:#F2EBDD;letter-spacing:-.015em;line-height:1.15;
margin:0;
}
.route-title em{color:var(--gold);font-style:italic;display:block}
.route-sub{
font-size:14px;line-height:1.55;
color:rgba(242,235,221,.7);
max-width:54ch;margin:4px auto 0;
}
/* SVG stage (desktop) */
.route-stage{
position:relative;
max-width:960px;margin:0 auto;
aspect-ratio:4/3;
}
@media(max-width:680px){.route-stage{display:none}}
/* Country outline rendered from the PNG (alpha used as mask, tinted gold) */
.route-country-img{
position:absolute;inset:0;
background:linear-gradient(180deg,#E7B85F 0%, #D9A441 65%, #B88631 100%);
-webkit-mask: url('mapa-ecuador.png') center/contain no-repeat;
mask: url('mapa-ecuador.png') center/contain no-repeat;
filter:drop-shadow(0 0 14px rgba(217,164,65,.22));
opacity:0;
transition:opacity 1.2s var(--ease);
}
.route-stage.is-in .route-country-img{opacity:.95}
.route-overlay{
position:absolute;inset:0;
width:100%;height:100%;
pointer-events:none;
overflow:visible;
}
.route-equator{
stroke:rgba(217,164,65,.45);stroke-width:1;
stroke-dasharray:3 6;fill:none;
}
.route-equator-tag{
position:absolute;right:38%;top:calc(290 / 600 * 100% - 18px);
font-family:var(--mono);font-size:10px;letter-spacing:.24em;
color:rgba(217,164,65,.7);text-transform:uppercase;
pointer-events:none;
}
.route-plane-path{
fill:none;stroke:rgba(242,235,221,.5);
stroke-width:1.2;stroke-dasharray:3 5;stroke-linecap:round;
opacity:0;transition:opacity 1s var(--ease);
}
.route-stage.is-in .route-plane-path{opacity:1;transition-delay:.1s}
.route-segment{
fill:none;stroke:rgba(217,164,65,.9);
stroke-width:1.8;stroke-dasharray:4 5;stroke-linecap:round;
opacity:0;transition:opacity .8s var(--ease);
}
.route-stage.is-in .route-segment{opacity:1}
.route-stage.is-in .route-segment[data-seg="1"]{transition-delay:.85s}
.route-stage.is-in .route-segment[data-seg="2"]{transition-delay:1.00s}
.route-stage.is-in .route-segment[data-seg="3"]{transition-delay:1.15s}
.route-stage.is-in .route-segment[data-seg="4"]{transition-delay:1.30s}
.route-leader{
stroke:rgba(217,164,65,.42);stroke-width:1;stroke-dasharray:2 4;
opacity:0;transition:opacity .6s var(--ease);
}
.route-stage.is-in .route-leader{opacity:1;transition-delay:1.45s}
/* Costa Rica origin (top-left, off-map) */
.route-pin.is-start{
position:absolute;
transform:translate(-50%,-50%);
text-align:center;
pointer-events:none;
opacity:0;
transition:opacity .5s var(--ease);
}
.route-stage.is-in .route-pin.is-start{opacity:1;transition-delay:.45s}
.route-pin.is-start .pin-marker{
width:42px;height:42px;border-radius:50%;
background:linear-gradient(160deg,#F2EBDD,#E7B85F);
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px rgba(242,235,221,.35),0 0 0 6px rgba(242,235,221,.10);
margin:0 auto;
}
.route-pin.is-start .pin-marker svg{
width:20px;height:20px;color:#1F2818;
stroke:#1F2818;fill:#1F2818;stroke-width:1.5;
}
.origin-label{
display:block;margin-top:10px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;font-weight:700;
color:rgba(242,235,221,.85);text-shadow:0 1px 6px rgba(0,0,0,.5);
white-space:nowrap;
}
/* On-map pins (clustered geographically) */
.route-pin.map-pin{
position:absolute;
transform:translate(-50%,-50%);
pointer-events:auto;
cursor:default;
background:none;border:none;padding:0;
opacity:0;
transition:opacity .5s var(--ease);
}
.route-stage.is-in .route-pin.map-pin{opacity:1}
.route-stage.is-in .route-pin.map-pin[data-pin="quito"] {transition-delay:1.55s}
.route-stage.is-in .route-pin.map-pin[data-pin="otavalo"] {transition-delay:1.65s}
.route-stage.is-in .route-pin.map-pin[data-pin="cotacachi"]{transition-delay:1.75s}
.route-stage.is-in .route-pin.map-pin[data-pin="ibarra"] {transition-delay:1.85s}
.route-stage.is-in .route-pin.map-pin[data-pin="cotopaxi"] {transition-delay:1.95s}
.route-pin.map-pin .pin-marker{
width:26px;height:26px;border-radius:50%;
background:linear-gradient(160deg,#E7B85F,#D9A441);
color:#1F2818;
display:flex;align-items:center;justify-content:center;
font-family:var(--serif);font-weight:700;font-size:13px;
box-shadow:0 0 0 3px rgba(31,40,24,.65), 0 4px 14px rgba(217,164,65,.5);
transition:transform .2s var(--ease), box-shadow .2s ease;
}
.route-pin.map-pin:hover{z-index:5}
.route-pin.map-pin:hover .pin-marker{
transform:scale(1.22);
box-shadow:0 0 0 3px rgba(31,40,24,.75), 0 8px 22px rgba(217,164,65,.7);
}
/* Tooltip — pop ABOVE the on-map pin so it never overlaps the labels column */
.route-pin.map-pin .pin-tooltip{
position:absolute;left:50%;bottom:calc(100% + 14px);
top:auto;
transform:translateX(-50%) translateY(4px);
min-width:200px;max-width:240px;
background:rgba(31,40,24,.96);
border:1px solid rgba(217,164,65,.55);
backdrop-filter:blur(8px);
border-radius:10px;padding:10px 13px 11px;
font-size:12px;line-height:1.5;color:rgba(242,235,221,.92);
opacity:0;pointer-events:none;
transition:opacity .2s ease, transform .25s var(--ease);
text-align:left;
box-shadow:0 12px 32px rgba(0,0,0,.55);
z-index:6;
}
.route-pin.map-pin .pin-tooltip::before{
content:"";position:absolute;left:50%;bottom:-5px;top:auto;
width:9px;height:9px;
background:rgba(31,40,24,.96);
border-right:1px solid rgba(217,164,65,.55);
border-bottom:1px solid rgba(217,164,65,.55);
border-left:0;border-top:0;
transform:translateX(-50%) rotate(45deg);
}
.route-pin.map-pin:hover .pin-tooltip{
opacity:1;transform:translateX(-50%) translateY(0);
}
.pin-tooltip strong{
display:block;color:var(--gold);
font-family:var(--serif);font-weight:500;font-size:14px;
margin-bottom:2px;letter-spacing:-.005em;
}
/* Side label column (right side of stage) */
.route-side-labels{
position:absolute;inset:0;
list-style:none;margin:0;padding:0;
pointer-events:none;
}
.route-side-labels li{
position:absolute;
left:65%;right:3%;
display:flex;align-items:center;gap:14px;
transform:translateY(-50%);
opacity:0;
transition:opacity .5s var(--ease);
}
.route-stage.is-in .route-side-labels li{opacity:1}
.route-side-labels li[data-pin="ibarra"] {transition-delay:1.55s}
.route-side-labels li[data-pin="otavalo"] {transition-delay:1.65s}
.route-side-labels li[data-pin="cotacachi"]{transition-delay:1.75s}
.route-side-labels li[data-pin="quito"] {transition-delay:1.85s}
.route-side-labels li[data-pin="cotopaxi"] {transition-delay:1.95s}
.route-side-labels .num{
flex:0 0 auto;
width:30px;height:30px;border-radius:50%;
background:linear-gradient(160deg,#E7B85F,#D9A441);
color:#1F2818;
display:flex;align-items:center;justify-content:center;
font-family:var(--serif);font-weight:700;font-size:13.5px;
box-shadow:0 4px 12px rgba(217,164,65,.35);
}
.route-side-labels .name{
font-family:var(--mono);font-size:12px;letter-spacing:.24em;font-weight:700;
color:#F2EBDD;text-transform:uppercase;
text-shadow:0 1px 6px rgba(0,0,0,.55);
}
/* Mobile vertical list */
.route-list{
display:none;
flex-direction:column;
max-width:520px;margin:0 auto;
list-style:none;padding:0;
}
@media(max-width:680px){.route-list{display:flex}}
.route-list-item{
position:relative;
display:grid;grid-template-columns:48px 1fr;gap:14px;
padding:10px 0;
}
.route-list-item:not(:last-child)::after{
content:"";position:absolute;
left:23px;top:54px;bottom:-2px;width:1px;
background-image:linear-gradient(to bottom,rgba(217,164,65,.7) 50%,transparent 50%);
background-size:1px 6px;
}
.route-list-marker{
width:46px;height:46px;border-radius:50%;
background:linear-gradient(160deg,#E7B85F,#D9A441);
color:#1F2818;font-family:var(--serif);font-weight:600;font-size:16px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(217,164,65,.35);
flex:0 0 auto;
}
.route-list-item.is-start .route-list-marker{
background:linear-gradient(160deg,#F2EBDD,#E7B85F);
}
.route-list-item.is-start .route-list-marker svg{width:22px;height:22px;color:#1F2818;stroke:currentColor;fill:#1F2818;stroke-width:1.5}
.route-list-marker svg.transport{
width:22px;height:22px;color:#1F2818;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.route-list-content{padding-top:8px}
.route-list-name{
font-family:var(--mono);font-size:11px;letter-spacing:.22em;font-weight:700;
color:var(--gold);text-transform:uppercase;
}
.route-list-name .day{color:rgba(242,235,221,.65);margin-left:6px}
.route-list-desc{
font-size:14px;line-height:1.55;color:rgba(242,235,221,.85);
margin-top:4px;
}
/* ============================================================
V4 — Departures premium cards (replaces compact rows)
============================================================ */
.dep-list{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
gap:20px;
margin-top:12px;
}
@media(max-width:680px){.dep-list{grid-template-columns:1fr;gap:16px}}
.dep-row{
position:relative;
display:grid;
grid-template-columns:1fr;
grid-template-areas:
"status"
"date"
"hook"
"meta"
"cta";
gap:14px;
padding:24px 24px 22px;
background:#fff;
border:1px solid rgba(31,40,24,.08);
border-radius:20px;
box-shadow:0 4px 14px rgba(31,40,24,.04), 0 1px 2px rgba(31,40,24,.05);
transition:transform .35s var(--ease), box-shadow .35s ease, border-color .25s ease;
overflow:hidden;
}
.dep-row::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg, var(--orange) 0%, var(--gold) 100%);
opacity:0;transition:opacity .3s ease;
}
.dep-row:hover{
transform:translateY(-4px);
box-shadow:0 18px 44px rgba(31,40,24,.10), 0 2px 6px rgba(31,40,24,.06);
border-color:rgba(217,164,65,.32);
}
.dep-row:hover::before{opacity:1}
/* Confirmed = primary hierarchy */
.dep-row:has(.dep-status.confirmed){
border-color:rgba(31,128,76,.22);
box-shadow:0 6px 20px rgba(31,40,24,.05), 0 1px 2px rgba(31,128,76,.06);
}
.dep-row:has(.dep-status.confirmed)::before{
background:linear-gradient(180deg, #29905a 0%, var(--gold) 100%);
}
/* Quoting = subdued */
.dep-row:has(.dep-status.quoting){
background:linear-gradient(180deg, #FBF8F1 0%, #F7F2E6 100%);
border-color:rgba(217,127,30,.18);
box-shadow:0 2px 10px rgba(31,40,24,.03);
}
.dep-row .dep-status{
grid-area:status;
align-self:flex-start;justify-self:flex-start;
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:100px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;font-weight:700;
text-transform:uppercase;line-height:1;
border:1px solid transparent;
width:fit-content;
}
.dep-row .dep-status.confirmed{
background:rgba(31,128,76,.10);color:#1a6e40;
border-color:rgba(31,128,76,.32);
box-shadow:0 2px 8px rgba(31,128,76,.10);
}
.dep-row .dep-status.confirmed::before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:#1a6e40;box-shadow:0 0 0 3px rgba(31,128,76,.18);
margin-right:2px;
}
.dep-row .dep-status.quoting{
background:rgba(217,127,30,.10);color:#A65F11;
border-color:rgba(217,127,30,.30);
}
.dep-row .dep-status.quoting::before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:#D17F1E;margin-right:2px;
}
.dep-row .dep-status.coming{
background:rgba(31,40,24,.06);color:var(--olive-2);
border-color:rgba(31,40,24,.16);
}
.dep-row .dep-status.coming::before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--olive-2);margin-right:2px;
}
.dep-row .dep-date{
grid-area:date;
font-family:var(--serif);
font-size:clamp(26px, 2.6vw, 32px);
font-weight:600;color:var(--olive-d);letter-spacing:-.015em;line-height:1.1;
margin:2px 0 0;
}
.dep-row:has(.dep-status.quoting) .dep-date{color:var(--olive-2)}
.dep-row .dep-hook{
grid-area:hook;
font-size:14.5px;color:var(--olive-2);line-height:1.5;margin:0;
}
.dep-row .dep-meta{
grid-area:meta;
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
font-family:var(--mono);font-size:11px;letter-spacing:.12em;
color:var(--mist);text-transform:uppercase;line-height:1.4;
padding-top:14px;border-top:1px dashed rgba(31,40,24,.10);
}
/* Scarcity hint — only on confirmed */
.dep-row:has(.dep-status.confirmed) .dep-meta::after{
content:"· Cupos limitados";
color:var(--orange);font-weight:600;letter-spacing:.1em;
}
html[lang="en"] .dep-row:has(.dep-status.confirmed) .dep-meta::after{
content:"· Limited spots";
}
.dep-row .dep-cta{
grid-area:cta;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:13px 18px;border-radius:100px;
font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;font-weight:700;
text-transform:uppercase;text-align:center;
transition:transform .25s var(--ease),background .25s ease,color .25s ease,box-shadow .25s ease;
white-space:nowrap;
margin-top:2px;
}
.dep-row .dep-cta.primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(209,127,30,.28)}
.dep-row .dep-cta.primary:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:0 14px 28px rgba(209,127,30,.38)}
.dep-row .dep-cta.gold{
background:transparent;color:var(--olive-d);
border:1.5px solid rgba(217,164,65,.55);
box-shadow:none;
}
.dep-row .dep-cta.gold:hover{
background:var(--gold);color:var(--olive-d);
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(217,164,65,.32);
border-color:var(--gold);
}
@media(max-width:520px){
.dep-row{padding:22px 20px 20px;border-radius:18px}
.dep-row .dep-date{font-size:24px}
.dep-row .dep-cta{padding:14px 18px;font-size:12px;width:100%}
}
/* ============================================================
V3 — Info práctica nested inside highlights (accordion)
============================================================ */
.hl-info-accordion{
margin-top:56px;
max-width:980px;margin-left:auto;margin-right:auto;
}
.hl-info-accordion .inc-acc-item.info{
background:var(--cream);
border:1px solid var(--cream-d);
color:var(--olive-2);
}
.hl-info-accordion .inc-acc-item.info .inc-acc-head{color:var(--olive-d)}
.hl-info-accordion .inc-acc-item.info .mark{background:rgba(92,105,56,.14);color:var(--olive)}
.hl-info-accordion .inc-acc-item.info .mark svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hl-info-accordion .inc-acc-item.is-open .inc-acc-body{max-height:1800px}
.info-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media(max-width:780px){.info-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.info-grid{grid-template-columns:1fr}}
.info-grid .prac-card{
background:#fff;
border:1px solid var(--cream-d);
border-radius:14px;
padding:20px 22px;
display:flex;flex-direction:column;
}
.info-grid .prac-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-s)}
.info-grid .prac-icon{
width:44px;height:44px;border-radius:50%;
background:rgba(92,105,56,.10);
margin-bottom:12px;
}
.info-grid .prac-icon svg{width:22px;height:22px}
.info-grid .prac-card h3{font-family:var(--serif);font-size:16px;font-weight:500;color:var(--olive-d);margin:0 0 4px}
.info-grid .prac-card p{font-size:13.5px;line-height:1.55;color:var(--mist);margin:0}
/* ============================================================
ROUTE MAP v2 — gold silhouette + numbered legend
Replaces previous .route-stage / .route-pin / .route-list system.
Map shows ONLY numbered circles; names live in the legend.
============================================================ */
.route-board{
display:grid;
grid-template-columns:1fr;
gap:32px;
max-width:1080px;margin:0 auto;
}
@media(min-width:768px){
.route-board{
grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
gap:56px;
align-items:start;
}
}
/* --- Map column --- */
.route-map{
position:relative;
aspect-ratio:11/8;
width:100%;
--map-silhouette:url('mapa-ecuador.png');
}
.route-map-silhouette{
position:absolute;inset:0;
background:linear-gradient(180deg,#E7B85F 0%, #D9A441 65%, #B88631 100%);
-webkit-mask: var(--map-silhouette) center/contain no-repeat;
mask: var(--map-silhouette) center/contain no-repeat;
filter:drop-shadow(0 0 14px rgba(217,164,65,.22));
opacity:0;
transition:opacity 1.2s var(--ease);
}
.route-board.is-in .route-map-silhouette{opacity:.95}
.route-map-lines{
position:absolute;inset:0;width:100%;height:100%;
overflow:visible;pointer-events:none;
}
.route-flight-line{
fill:none;stroke:rgba(242,235,221,.6);
stroke-width:1.2;stroke-dasharray:2.5 3.5;stroke-linecap:round;
vector-effect:non-scaling-stroke;
opacity:0;
transition:opacity 1s var(--ease) .35s;
}
.route-board.is-in .route-flight-line{opacity:1}
/* Numbered dot */
.route-dot{
position:absolute;
transform:translate(-50%,-50%);
width:30px;height:30px;border-radius:50%;
background:linear-gradient(160deg,#E7B85F,#D9A441);
color:#1F2818;border:0;cursor:default;
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:13px;font-weight:700;
box-shadow:0 0 0 3px rgba(31,40,24,.6), 0 6px 14px rgba(217,164,65,.4);
opacity:0;
transition:opacity .5s var(--ease), transform .25s ease, box-shadow .25s ease;
z-index:2;user-select:none;
}
.route-board.is-in .route-dot{opacity:1}
.route-board.is-in .route-dot[data-n="1"]{transition-delay:.55s}
.route-board.is-in .route-dot[data-n="2"]{transition-delay:.70s}
.route-board.is-in .route-dot[data-n="3"]{transition-delay:.85s}
.route-board.is-in .route-dot[data-n="4"]{transition-delay:1.00s}
.route-board.is-in .route-dot[data-n="5"]{transition-delay:1.15s}
.route-board.is-in .route-dot[data-n="6"]{transition-delay:1.30s}
/* Costa Rica origin: plane glyph + small number badge */
.route-dot.is-origin{
width:40px;height:40px;
background:linear-gradient(160deg,#F2EBDD,#E7B85F);
}
.route-dot.is-origin .dot-plane{
width:20px;height:20px;color:#1F2818;display:block;
}
.route-dot.is-origin .dot-num-badge{
position:absolute;top:-4px;right:-4px;
width:18px;height:18px;border-radius:50%;
background:#D9A441;color:#1F2818;
font-family:var(--mono);font-size:10px;font-weight:700;
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 2px rgba(31,40,24,.85);
}
/* --- Legend column --- */
.route-legend{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:12px;
}
.route-leg{
display:flex;align-items:flex-start;gap:14px;
padding:14px 16px;
background:rgba(242,235,221,.04);
border:1px solid rgba(217,164,65,.16);
border-radius:14px;
position:relative;
opacity:0;transform:translateX(8px);
transition:opacity .5s var(--ease), transform .5s var(--ease),
border-color .25s ease, background .25s ease;
}
.route-board.is-in .route-leg{opacity:1;transform:none}
.route-board.is-in .route-leg[data-n="1"]{transition-delay:.55s}
.route-board.is-in .route-leg[data-n="2"]{transition-delay:.70s}
.route-board.is-in .route-leg[data-n="3"]{transition-delay:.85s}
.route-board.is-in .route-leg[data-n="4"]{transition-delay:1.00s}
.route-board.is-in .route-leg[data-n="5"]{transition-delay:1.15s}
.route-board.is-in .route-leg[data-n="6"]{transition-delay:1.30s}
.route-leg:hover{
background:rgba(242,235,221,.07);
border-color:rgba(217,164,65,.4);
}
.leg-num{
flex:0 0 auto;
width:32px;height:32px;border-radius:50%;
background:linear-gradient(160deg,#E7B85F,#D9A441);
color:#1F2818;
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:13px;font-weight:700;
box-shadow:0 4px 12px rgba(217,164,65,.3);
}
.leg-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.leg-name{
font-family:var(--serif);font-style:italic;font-weight:500;
font-size:19px;color:#F2EBDD;line-height:1.2;
letter-spacing:-.005em;
}
.leg-desc{
font-size:13.5px;line-height:1.45;
color:rgba(242,235,221,.7);
}
/* Desktop-only dashed gold connector from leg → toward map */
@media(min-width:768px){
.route-leg::before{
content:'';
position:absolute;
right:calc(100% + 4px);top:30px;
width:40px;height:0;
border-top:1px dashed rgba(217,164,65,.35);
pointer-events:none;
}
}
/* Mobile tightening */
@media(max-width:767px){
.route-board{gap:24px}
.route-map{aspect-ratio:11/8.5}
.route-dot{width:28px;height:28px;font-size:12px}
.route-dot.is-origin{width:36px;height:36px}
.route-dot.is-origin .dot-plane{width:18px;height:18px}
.leg-name{font-size:17px}
}
/* Kill any leftover legacy map elements (safety net) */
.route-stage,
.route-list,
.route-side-labels,
.route-overlay,
.route-country-img{display:none !important}
/* ============================================================
ROUTE MAP v3 — equator line + interactive states + Día 7 return
============================================================ */
/* Section header: keep map breathing on mobile */
@media (max-width: 767px){
.tour-route-map{padding:48px 0 60px}
.route-head{margin-bottom:32px;gap:12px;padding:0 4px}
.route-title{font-size:clamp(28px,7.5vw,36px) !important;line-height:1.15}
.route-sub{font-size:15.5px;line-height:1.55;color:rgba(242,235,221,.78)}
}
/* Map area — full bleed on phone, bigger silhouette */
@media (max-width: 767px){
.route-board{
grid-template-columns:1fr !important;
gap:28px !important;
}
.route-map{
width:100%;
aspect-ratio:5/4; /* taller so the silhouette is BIG */
margin:0;
}
.route-map-silhouette{
/* drop-shadow + a touch more contrast on mobile */
filter:drop-shadow(0 4px 18px rgba(217,164,65,.28));
}
}
/* Equator dashed line + LAT 0° tag — brand detail re-introduced */
.route-equator-line{
position:absolute;inset:0;width:100%;height:100%;
overflow:visible;pointer-events:none;
opacity:0;
transition:opacity 1s var(--ease) .35s;
}
.route-equator-line line{
stroke:rgba(217,164,65,.55);
stroke-width:1;
stroke-dasharray:4 6;
vector-effect:non-scaling-stroke;
}
.route-board.is-in .route-equator-line{opacity:1}
.route-equator-tag{
position:absolute;
/* sit on the equator line (y=48%) with a tiny gap */
top:48%; right:3%;
transform:translateY(-130%);
display:inline-block !important;
font-family:var(--mono);
font-size:10px;letter-spacing:.32em;font-weight:700;
color:rgba(217,164,65,.85);
text-transform:uppercase;
background:rgba(31,40,24,.55);
padding:3px 8px;border-radius:4px;
pointer-events:none;
opacity:0;
transition:opacity .8s var(--ease) .55s;
white-space:nowrap;
z-index:3;
}
.route-board.is-in .route-equator-tag{opacity:1}
@media (max-width: 767px){
.route-equator-tag{font-size:11px;padding:4px 9px}
}
/* Numbered dots — now buttons; ensure consistent reset */
button.route-dot{
padding:0;font-family:var(--mono);
-webkit-tap-highlight-color:transparent;
}
/* Interactive state on dots */
.route-dot{
cursor:pointer;
transition:opacity .5s var(--ease), transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.route-dot:hover{
transform:translate(-50%,-50%) scale(1.12);
box-shadow:0 0 0 3px rgba(31,40,24,.75), 0 8px 22px rgba(217,164,65,.7);
}
.route-dot.is-active{
transform:translate(-50%,-50%) scale(1.25);
background:linear-gradient(160deg,#F2EBDD,#E7B85F);
box-shadow:
0 0 0 4px rgba(242,235,221,.18),
0 0 0 7px rgba(217,164,65,.45),
0 10px 28px rgba(217,164,65,.6);
z-index:5;
}
.route-dot:focus-visible{
outline:0;
box-shadow:
0 0 0 4px rgba(242,235,221,.25),
0 0 0 7px rgba(217,164,65,.55),
0 8px 22px rgba(217,164,65,.7);
}
/* Make sure on mobile dots are easy to tap (≥36px) */
@media (max-width: 767px){
.route-dot{width:36px;height:36px;font-size:15px}
.route-dot.is-origin{width:44px;height:44px}
.route-dot.is-origin .dot-plane{width:22px;height:22px}
.route-dot.is-origin .dot-num-badge{width:20px;height:20px;font-size:11px;top:-5px;right:-5px}
}
/* Legend — bigger tap targets, day reveal on active */
.route-leg{
cursor:pointer;
outline:0;
}
.route-leg:focus-visible{
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(217,164,65,.25);
}
.route-leg.is-active{
background:linear-gradient(155deg,rgba(217,164,65,.18),rgba(217,164,65,.04));
border-color:rgba(217,164,65,.7);
box-shadow:0 12px 28px rgba(0,0,0,.32), 0 0 0 1px rgba(217,164,65,.4) inset;
}
.route-leg.is-active .leg-num{
background:linear-gradient(160deg,#F2EBDD,#E7B85F);
box-shadow:0 6px 18px rgba(242,235,221,.35), 0 0 0 3px rgba(217,164,65,.25);
}
.route-leg.is-active .leg-name{color:#FFF8E8}
/* "Day" line — hidden until the row is active */
.leg-day{
display:none;
margin-top:8px;
font-family:var(--mono);
font-size:11.5px;letter-spacing:.14em;font-weight:700;
color:var(--gold);text-transform:uppercase;
padding:6px 10px 6px 0;
line-height:1.5;
position:relative;
border-left:2px solid var(--gold);
padding-left:10px;
}
.route-leg.is-active .leg-day{
display:inline-block;
animation:legDayIn .4s var(--ease);
}
@keyframes legDayIn{
from{opacity:0;transform:translateY(-4px)}
to {opacity:1;transform:none}
}
/* Día 7 return leg — distinct visual treatment (plane glyph + dashed) */
.route-leg.is-return{
border-style:dashed;
border-color:rgba(217,164,65,.45);
background:rgba(242,235,221,.025);
}
.route-leg.is-return .leg-num{
background:linear-gradient(160deg,#F2EBDD,#E7B85F);
color:#1F2818;
display:flex;align-items:center;justify-content:center;
}
.route-leg.is-return .leg-num svg{width:15px;height:15px;color:#1F2818;transform:scaleX(-1)}
.route-leg.is-return .leg-name::after{
content:"";display:inline-block;
width:6px;height:6px;border-radius:50%;
background:var(--gold);margin-left:8px;vertical-align:middle;
box-shadow:0 0 0 3px rgba(217,164,65,.18);
}
@media (max-width:767px){
.route-leg.is-return::before{display:none}
}
/* On mobile: hide the desktop dashed connector going RIGHT from leg */
@media (min-width:768px){
.route-leg.is-return::before{display:none} /* return leg sits below; no map connector */
}
/* Floating detail panel (shown when a dot/leg is selected) */
.route-detail{
max-width:560px;
margin:0 auto 32px;
padding:18px 22px 20px;
background:linear-gradient(160deg, rgba(31,40,24,.92), rgba(20,28,14,.88));
border:1px solid rgba(217,164,65,.55);
border-radius:18px;
box-shadow:0 18px 44px rgba(0,0,0,.4), 0 0 0 1px rgba(217,164,65,.1) inset;
position:relative;
color:#F2EBDD;
display:flex;flex-direction:column;gap:6px;
animation:routeDetailIn .35s var(--ease);
}
@keyframes routeDetailIn{
from{opacity:0;transform:translateY(-6px)}
to {opacity:1;transform:none}
}
.route-detail[hidden]{display:none !important}
.route-detail-day{
font-family:var(--mono);
font-size:11px;letter-spacing:.22em;font-weight:700;
color:var(--gold);text-transform:uppercase;
}
.route-detail-name{
font-family:var(--serif);font-weight:600;
font-size:22px;color:#FFF8E8;line-height:1.15;
letter-spacing:-.005em;
padding-right:32px;
}
.route-detail-desc{
font-size:14.5px;line-height:1.5;color:rgba(242,235,221,.82);
}
.route-detail-close{
position:absolute;top:10px;right:10px;
width:32px;height:32px;border-radius:50%;
background:rgba(242,235,221,.08);
border:1px solid rgba(242,235,221,.18);
color:#F2EBDD;font-size:18px;line-height:1;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:background .2s ease, transform .2s ease;
}
.route-detail-close:hover{background:rgba(242,235,221,.18);transform:scale(1.05)}
@media (max-width: 767px){
.route-detail{
max-width:none;
margin:0 16px 24px;
padding:16px 18px 18px;
border-radius:14px;
}
.route-detail-name{font-size:21px;padding-right:34px}
.route-detail-desc{font-size:15px}
}
/* Legend tighter cadence on phone */
@media (max-width: 767px){
.route-legend{gap:10px}
.route-leg{padding:14px 14px;border-radius:12px}
.leg-name{font-size:18px;line-height:1.2}
.leg-desc{font-size:14.5px;line-height:1.5;color:rgba(242,235,221,.78)}
.leg-num{width:36px;height:36px;font-size:14px}
}
/* ============================================================
MOBILE-FIRST RESPONSIVE OVERHAUL (<768px)
"La mayoría de clientes ven desde celular"
Bigger type, stacked hero, big tap targets, no horizontal scroll
============================================================ */
html, body{overflow-x:hidden}
@media (max-width: 767px){
/* ---------- Hero ---------- */
.tour-hero{
min-height:auto;
padding:110px 0 56px;
display:block; /* stack everything */
}
.tour-hero-inner{
grid-template-columns:1fr !important;
gap:24px;
padding:0 20px;
align-items:stretch;
}
.tour-breadcrumb{
font-size:11px;
margin-bottom:18px;
flex-wrap:wrap;
gap:6px;
}
.tour-hero-eyebrow{
font-size:12px;
letter-spacing:.22em;
margin-bottom:18px;
}
.tour-hero h1{
font-size:clamp(46px,12vw,68px);
line-height:.96;
margin:0 0 22px;
}
.tour-hero h1 em{
font-size:.55em;
margin-top:6px;
}
.tour-meta{
font-size:13px;
letter-spacing:.08em;
gap:10px 16px;
margin-bottom:20px;
}
.tour-meta .pipe{display:none} /* pipes get noisy when wrapped */
.tour-pills{gap:7px;margin-bottom:8px}
.tour-pill{
font-size:11.5px;
padding:8px 14px;
letter-spacing:.14em;
}
/* PRICE BOX — stacked below the title, full width, big & tappable */
.tour-pricebox{
margin-top:8px;
padding:24px 22px 22px;
border-radius:22px;
gap:12px;
}
.tour-pricebox-from{font-size:12px;letter-spacing:.22em}
.tour-pricebox-amount{
font-size:64px;
line-height:1;
letter-spacing:-.02em;
}
.tour-pricebox-amount .currency{font-size:.45em}
.tour-pricebox-note{font-size:14.5px;margin:-2px 0 8px}
.tour-pricebox .btn{
min-height:56px;
padding:18px 22px;
font-size:16.5px;
border-radius:14px;
font-weight:700;
letter-spacing:.02em;
box-shadow:0 14px 28px rgba(209,127,30,.5), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.tour-pricebox-fineprint{font-size:11px;letter-spacing:.16em}
.tour-hero .scroll-cue{bottom:14px;font-size:10px}
.tour-hero .scroll-cue .scroll-line{height:28px}
/* ---------- Section heads ---------- */
.section-head{margin-bottom:36px}
.section-title{
font-size:clamp(30px,8vw,40px) !important;
line-height:1.08;
}
.eyebrow{
font-size:12px;
letter-spacing:.22em;
margin-bottom:14px;
}
/* ---------- Summary lead ---------- */
.tour-summary{padding:48px 0 32px}
.tour-summary .lead{
font-size:17px;
line-height:1.6;
}
/* ---------- Ribbon gallery captions ---------- */
.tour-ribbons .ribbon-caption{font-size:11.5px;letter-spacing:.18em}
/* ---------- Itinerary ---------- */
.tour-itinerary{padding:48px 0 56px}
/* Force symmetric horizontal padding on every wrapper around the day-list
so cards sit dead-center on every phone width. */
.tour-journey,
.tour-journey > .container,
.tour-journey .journey-panes,
.tour-journey .journey-pane,
.tour-journey .tour-itinerary,
.tour-journey .tour-itinerary > .container{
margin-left:0 !important;
margin-right:0 !important;
}
.tour-journey > .container,
.tour-journey .tour-itinerary > .container{
padding-left:16px !important;
padding-right:16px !important;
width:100% !important;
box-sizing:border-box !important;
}
.day-list{
width:100% !important;
margin:0 auto !important;
max-width:100% !important;
box-sizing:border-box;
}
.day{
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
box-sizing:border-box;
}
/* Mobile day-head: clean 2-row grid. Row 1 = day-num | day-meals | toggle
(symmetric edges). Row 2 = day-title full-width. No flex-wrap hacks. */
.day-head{
display:grid !important;
grid-template-columns:auto 1fr auto;
grid-template-areas:
"num meals toggle"
"title title title";
align-items:center;
column-gap:14px;
row-gap:6px;
padding:18px 18px;
}
.day-head > .day-num { grid-area:num; margin:0 !important; }
.day-head > .day-meals { grid-area:meals; justify-self:end; margin:0 !important; order:initial; }
.day-head > .day-toggle{ grid-area:toggle; margin:0 !important; order:initial; justify-self:end; }
.day-head > .day-title { grid-area:title; margin:4px 0 0 !important; flex:none; order:initial; }
.day-num{
min-width:56px;
font-size:10.5px;
}
.day-num strong{font-size:26px}
.day-title{
font-size:18px !important;
line-height:1.3;
}
.day-meals{font-size:16px;gap:4px}
.day-toggle{width:34px;height:34px;font-size:18px}
.day-body-inner{padding:4px 18px 24px;gap:18px;margin-left:0 !important;margin-right:0 !important}
.day-narrative{font-size:16px;line-height:1.65}
.day-act{font-size:11px;letter-spacing:.1em;padding:6px 11px}
.day-transport{font-size:12px;padding:9px 14px}
/* ---------- Departures ---------- */
.tour-departures{padding:48px 0 56px}
.dep-row{padding:22px 20px}
.dep-row .dep-date{font-size:24px}
.dep-row .dep-hook{font-size:15.5px;line-height:1.55}
.dep-row .dep-meta{font-size:12px}
.dep-row .dep-cta{
min-height:54px;
padding:16px 22px;
font-size:13px;
width:100%;
border-radius:12px;
}
/* ---------- Included accordion ---------- */
.tour-included{padding:48px 0 56px}
.inc-acc-head{
padding:18px 18px;
font-size:18px;
gap:12px;
}
.inc-acc-head .label{line-height:1.25}
.inc-acc-head .mark{width:30px;height:30px}
.inc-acc-head .acc-toggle{width:34px;height:34px;font-size:18px}
.inc-acc-body-inner{padding:0 18px 22px}
.inc-list li{font-size:15.5px;line-height:1.6}
.info-grid{grid-template-columns:1fr;gap:14px}
.info-grid .prac-card{padding:18px 18px}
.info-grid .prac-card h3{font-size:17px}
.info-grid .prac-card p{font-size:14.5px;line-height:1.6}
/* ---------- Pricing ---------- */
.tour-pricing{padding:48px 0 60px}
.pricing-grid{gap:28px}
.price-amount{font-size:12px;letter-spacing:.22em}
.price-big{font-size:84px;line-height:.95}
.price-note{font-size:15.5px}
.price-supplement{font-size:14px;letter-spacing:.04em}
.reserve-card{padding:24px 22px 22px}
.reserve-card h3{font-size:21px}
.reserve-list li{font-size:15.5px;line-height:1.6}
.reserve-card .btn{
min-height:56px;
padding:18px 22px;
font-size:16px;
border-radius:14px;
font-weight:700;
}
.price-cancel-note{font-size:11.5px;letter-spacing:.1em;line-height:1.55}
/* ---------- Form ---------- */
.tour-form-section{padding:48px 0 60px}
.tour-form-wrap{padding:24px 18px 22px;border-radius:18px}
.tour-form-section .section-sub{font-size:16px}
.step-pane legend h3{font-size:22px;line-height:1.25}
.step-pane legend p{font-size:14.5px;line-height:1.55}
.field-label{font-size:14px}
.cotizar-form input[type="text"],
.cotizar-form input[type="email"],
.cotizar-form input[type="tel"],
.cotizar-form input[type="month"],
.cotizar-form input[type="number"],
.cotizar-form select,
.cotizar-form textarea{
font-size:16px; /* prevent iOS auto-zoom */
padding:14px 14px;
min-height:52px;
}
.cotizar-form textarea{min-height:96px}
.stepper input{font-size:16px;padding:14px 0}
.stepper button{width:48px;min-height:52px;font-size:22px}
.step-actions .btn{
min-height:52px;
padding:16px 22px;
font-size:15px;
border-radius:12px;
}
.step-actions .btn.btn-text{min-height:auto}
.trip-type-card{padding:20px 20px 18px}
.trip-type-card h4{font-size:18px;line-height:1.3}
.trip-type-card .trip-eyebrow{font-size:12px}
.trip-type-card .trip-detail{font-size:12px;letter-spacing:.08em;line-height:1.5}
/* ---------- Related cards ---------- */
.tour-related{padding:48px 0 56px}
.related-card{max-width:none}
.related-body{padding:20px 22px 22px}
.related-title{font-size:24px}
.related-eyebrow{font-size:11px;letter-spacing:.18em}
.related-meta{font-size:11.5px;flex-wrap:wrap;gap:8px}
/* ---------- Container padding (a touch tighter on phones) ---------- */
.container{padding:0 20px}
/* ---------- WhatsApp float ---------- */
.wa-float{width:58px;height:58px;right:18px;bottom:18px}
}
/* Tighter for very small devices */
@media (max-width: 380px){
.tour-hero h1{font-size:42px}
.tour-pricebox-amount{font-size:56px}
.section-title{font-size:28px !important}
.container{padding:0 16px}
}
/* Avoid stale "primary" CTA on small screens having low contrast */
@media (max-width: 767px){
.tour-pricebox .btn{background:#D17F1E}
}
/* ============================================================
V5 — Hero background carousel (crossfade + Ken Burns)
GPU-only (opacity + transform). Lazy-loaded slides 2-5.
============================================================ */
.tour-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#1F2818}
.tour-hero-media > .hero-slide{
position:absolute;inset:0;
background-size:cover;
background-repeat:no-repeat;
background-position:center 40%; /* default — slight upward bias for sky/horizons */
opacity:0;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transform:scale(1);
transition:opacity 1100ms ease-in-out;
will-change:opacity, transform;
pointer-events:none;
}
/* Per-slide framing — keeps the subject in view on wide aspect ratios (FIX 20) */
.tour-hero-media > .hero-slide:nth-child(1){background-position:center 35%} /* cotopaxi — volcán + cielo */
.tour-hero-media > .hero-slide:nth-child(2){background-position:center 42%} /* quito-cotopaxi — ciudad + volcán al fondo */
.tour-hero-media > .hero-slide:nth-child(3){background-position:center 55%} /* plaza-ponchos — mercado + gente */
.tour-hero-media > .hero-slide:nth-child(4){background-position:center 45%} /* refugio-cayambe — refugio + nieve */
.tour-hero-media > .hero-slide:nth-child(5){background-position:center 40%} /* telesferico-cotopaxi — teleférico + horizonte */
.tour-hero-media > .hero-slide:nth-child(6){background-position:center 50%} /* tren-ibarra — tren + cultivos + volcán */
.tour-hero-media > .hero-slide:nth-child(7){background-position:center 38%} /* centro-historico — basílica al atardecer */
.tour-hero-media > .hero-slide:nth-child(8){background-position:center 32%} /* virgen-panecillo — estatua alta */
.tour-hero-media > .hero-slide:nth-child(9){background-position:center 42%} /* telesferico-quito — cable + ascenso */
.tour-hero-media > .hero-slide.is-active{opacity:1}
/* Desktop — Ken Burns slow scale while the slide is on screen */
@media(min-width:768px){
.tour-hero-media > .hero-slide.is-active{
animation: heroKenBurns 6s linear forwards;
}
}
@keyframes heroKenBurns{
from{transform:scale(1.00)}
to {transform:scale(1.03)} /* FIX 20 — was 1.06, reduced to keep subjects in frame */
}
/* Mobile — same smooth crossfade, no Ken Burns to save CPU/battery */
@media(max-width:767px){
.tour-hero-media > .hero-slide{transition:opacity 1100ms ease-in-out}
.tour-hero-media > .hero-slide.is-active{animation:none;transform:none}
}
/* Reduced motion — no rotation */
@media(prefers-reduced-motion:reduce){
.tour-hero-media > .hero-slide{transition:none}
.tour-hero-media > .hero-slide.is-active{animation:none;transform:none}
}
/* ============================================================
V6 — Departures premium slider
Desktop: 3-up, arrows + dots. Mobile: 1 + peek, swipe + dots.
============================================================ */
.dep-slider{
position:relative;
max-width: calc(var(--maxw) + 32px);
margin: 28px auto 0;
}
.dep-track{
display:flex;
gap:24px;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
padding: 12px 24px 28px;
scroll-padding: 0 24px;
scrollbar-width:none;
-ms-overflow-style:none;
scroll-behavior:smooth;
}
.dep-track::-webkit-scrollbar{display:none}
.dep-track:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
/* Override the original grid layout — slider replaces it */
.tour-departures .dep-list{display:none}
.dep-track .dep-row{
scroll-snap-align:start;
flex: 0 0 auto;
/* Desktop: 3 visible inside the container */
width: calc((100% - 48px) / 3);
min-width:0;
/* Fade-up entrance, applied via JS once visible */
opacity:0;
transform:translateY(16px);
transition:opacity .55s cubic-bezier(.22,.61,.36,1),
transform .55s cubic-bezier(.22,.61,.36,1),
box-shadow .25s ease,
border-color .25s ease;
}
.dep-track .dep-row.in-view{
opacity:1;
transform:translateY(0);
}
.dep-track .dep-row:hover{
transform:translateY(-6px);
box-shadow:0 24px 50px rgba(31,40,24,.12), 0 4px 10px rgba(31,40,24,.06);
}
/* Tablet — 2-up */
@media(max-width:1023px){
.dep-track .dep-row{width: calc((100% - 24px) / 2)}
}
/* Mobile — 1 visible + peek of next */
@media(max-width:680px){
.dep-track{gap:16px;padding:12px 20px 24px;scroll-padding:0 20px}
.dep-track .dep-row{width: 82%}
}
/* CTA hover lift */
.dep-track .dep-row .dep-cta{
transition:background .25s ease, color .25s ease,
transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.dep-track .dep-row .dep-cta:hover{
transform:translateY(-2px) scale(1.03);
filter:brightness(1.05);
}
.dep-track .dep-row .dep-cta.primary:hover{
box-shadow:0 16px 34px rgba(209,127,30,.42);
}
.dep-track .dep-row .dep-cta.gold:hover{
box-shadow:0 14px 30px rgba(217,164,65,.40);
}
/* Pulse the scarcity pill once when card enters view */
.dep-track .dep-row.in-view .dep-urgency.amber{
animation: depUrgencyPulse 600ms ease-out 220ms 1;
transform-origin:center;
}
@keyframes depUrgencyPulse{
0% {transform:scale(1)}
50% {transform:scale(1.05)}
100%{transform:scale(1)}
}
/* Confirmed = stronger hierarchy. Warmer background + soft gold rim. */
.dep-track .dep-row:has(.dep-status.confirmed){
background:linear-gradient(180deg, #FFFCF4 0%, #FBF6E6 100%);
border-color:rgba(217,164,65,.30);
box-shadow:
0 6px 22px rgba(31,40,24,.07),
0 0 0 1px rgba(217,164,65,.10) inset;
}
.dep-track .dep-row:has(.dep-status.confirmed):hover{
border-color:rgba(217,164,65,.55);
box-shadow:
0 24px 50px rgba(31,40,24,.12),
0 0 0 1px rgba(217,164,65,.30) inset;
}
.dep-track .dep-row:has(.dep-status.confirmed) .dep-meta{
font-weight:600;
color:var(--olive-d);
}
.dep-track .dep-row:has(.dep-status.confirmed) .dep-meta strong,
.dep-track .dep-row:has(.dep-status.confirmed) .dep-date{
font-weight:600;
}
/* Quoting = quieter */
.dep-track .dep-row:has(.dep-status.quoting){
background:linear-gradient(180deg, #FBF8F1 0%, #F7F2E6 100%);
border-color:rgba(217,127,30,.16);
box-shadow:0 4px 14px rgba(31,40,24,.04);
}
/* Arrows — desktop only (mobile swipes) */
.dep-arrow{
position:absolute; top:50%; transform:translateY(-50%);
z-index:6;
display:none;
align-items:center;justify-content:center;
width:48px;height:48px;border-radius:50%;
background:rgba(250,250,247,.95);
border:1px solid rgba(217,164,65,.35);
color:var(--olive-d);
font-family:var(--serif);font-size:32px;line-height:1;
cursor:pointer;
box-shadow:0 12px 28px rgba(31,40,24,.16);
transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dep-arrow span{display:block;margin-top:-3px}
.dep-arrow.prev{left:-6px}
.dep-arrow.next{right:-6px}
.dep-arrow:hover{
background:var(--gold); color:var(--olive-d);
transform:translateY(-50%) scale(1.06);
box-shadow:0 16px 36px rgba(217,164,65,.40);
}
.dep-arrow:active{transform:translateY(-50%) scale(.96)}
.dep-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dep-arrow[disabled]{opacity:.4;cursor:not-allowed}
@media(min-width:768px){.dep-arrow{display:flex}}
/* Dots */
.dep-dots{
display:flex;justify-content:center;align-items:center;gap:9px;
margin-top:8px;padding:0 24px;flex-wrap:wrap;
}
.dep-dot{
width:8px;height:8px;border-radius:50%;
border:0;padding:0;cursor:pointer;
background:rgba(31,40,24,.20);
transition:background .3s ease,width .3s ease,border-radius .3s ease;
}
.dep-dot.active{background:var(--gold);width:24px;border-radius:4px}
.dep-dot:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
.dep-track .dep-row{opacity:1;transform:none;transition:none}
.dep-track .dep-row.in-view .dep-urgency.amber{animation:none}
}
/* ============================================================
Form validation — error states (FIX 16)
============================================================ */
.cotizar-form input.error,
.cotizar-form select.error,
.cotizar-form textarea.error{
border-color:#C53030 !important;
background-color:rgba(197,48,48,.04);
outline:none;
}
.cotizar-form input.error:focus,
.cotizar-form select.error:focus,
.cotizar-form textarea.error:focus{
border-color:#C53030 !important;
box-shadow:0 0 0 3px rgba(197,48,48,.15);
}
.field-error{
display:block;
color:#C53030;
font-size:13px;
margin-top:5px;
line-height:1.4;
}
/* ============================================================
Desktop: larger route map (shared by Ecuador + Perú).
Pins are in %, silhouette is background-size:contain &
aspect-ratio:11/8 — both preserved, so pins stay true and
the silhouette never deforms. Mobile (<768px) untouched.
============================================================ */
@media (min-width: 769px){
.route-board{
max-width:1280px;
grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
}
}
/* ============================================================
Hero blur-in entrance (shared: Ecuador + Perú).
Title letters fade+unblur in sequence, then kicker →
subtitle → stats → tags cascade. JS adds .anim-ready then
.is-in on .
============================================================ */
.tour-hero h1 .rl{
display:inline-block;opacity:0;filter:blur(16px);transform:scale(1.08);
will-change:opacity,filter,transform;
}
.tour-hero.is-in h1 .rl{animation:heroBlurIn .85s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes heroBlurIn{to{opacity:1;filter:blur(0);transform:none;}}
.tour-hero.anim-ready .tour-hero-eyebrow,
.tour-hero.anim-ready h1 em,
.tour-hero.anim-ready .tour-meta,
.tour-hero.anim-ready .tour-pills{
opacity:0;filter:blur(12px);transform:translateY(10px);
}
.tour-hero.anim-ready.is-in .tour-hero-eyebrow{animation:heroBlurInY .8s ease .55s forwards;}
.tour-hero.anim-ready.is-in h1 em{animation:heroBlurInY .8s ease .72s forwards;}
.tour-hero.anim-ready.is-in .tour-meta{animation:heroBlurInY .8s ease .90s forwards;}
.tour-hero.anim-ready.is-in .tour-pills{animation:heroBlurInY .8s ease 1.08s forwards;}
@keyframes heroBlurInY{to{opacity:1;filter:blur(0);transform:none;}}
@media (prefers-reduced-motion: reduce){
.tour-hero h1 .rl,
.tour-hero .tour-hero-eyebrow,
.tour-hero h1 em,
.tour-hero .tour-meta,
.tour-hero .tour-pills{
animation:none!important;opacity:1!important;filter:none!important;transform:none!important;
}
}
/* ============================================================
=== HERO REDISEÑO ===
REVERTIR EN UNA LÍNEA: borrar este bloque + quitar la clase
`is-redesign` del + descomentar
el panel original (marcado /* HERO ORIGINAL */) en ecuador.html
y peru.html (y borrar el