/* ---------- Hero ---------- */
.hero{position:relative;min-height:520px;display:flex;align-items:center;}
.hero-img{position:absolute;inset:0;}
/* Scrim: heavy dark wash on the left (where the white headline sits) fading to reveal the sunset on the right,
   plus a soft bottom vignette. Keeps the copy legible over the bright sky without hiding the photo. */
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,24,29,.64) 0%,rgba(10,24,29,.36) 34%,rgba(10,24,29,.06) 64%,rgba(10,24,29,0) 100%),linear-gradient(180deg,rgba(10,24,29,.46) 0%,rgba(10,24,29,.14) 24%,rgba(10,24,29,0) 44%,rgba(10,24,29,.16) 72%,rgba(10,24,29,.44) 100%);}
.hero-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(80% 120% at 0% 45%,rgba(8,20,25,.34),rgba(8,20,25,0) 58%);}
.hero-c{position:relative;z-index:2;width:100%;padding:65px 0;}
/* Cancel the generic `section .wrap` vertical padding here — the hero owns its spacing via .hero-c.
   (Otherwise the two stack to ~108px above the pill / below the search.) */
.hero-c .wrap{color:#fff;width:100%;padding-top:0;padding-bottom:0;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px);padding:6px 13px;border-radius:999px;margin-bottom:16px;}
.hero h1{font-size:clamp(30px,4.4vw,52px);line-height:1.06;font-weight:800;letter-spacing:-.025em;max-width:19ex;margin-bottom:14px;text-shadow:0 2px 22px rgba(0,0,0,.5);}
.hero p{font-size:clamp(15px,1.4vw,18px);max-width:54ch;margin-bottom:24px;opacity:.95;}
.reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:none;}}

/* ---------- Omni-search ---------- */
/* overflow:visible so the date/passengers popovers can escape the card instead of being clipped by it. */
.omni{background:#fff;border-radius:18px;max-width:920px;box-shadow:var(--shadow-float);}
.otabs{display:flex;gap:2px;padding:7px 8px 0;border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;}
.ofields .of[data-control] .popover{z-index:90;}
.otab{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--muted);padding:11px 16px;border-radius:10px 10px 0 0;cursor:pointer;white-space:nowrap;}
.otab i{font-size:18px;}
.otab.on{color:var(--teal-d);background:var(--teal-50);}
.otab:hover:not(.on){background:#F4F6F5;}
.ofields{display:flex;align-items:stretch;gap:0;padding:8px;}
.of{flex:1;padding:8px 16px;border-right:1px solid var(--line);min-width:0;}
.of:last-of-type{border-right:none;}
.of.dest{flex:1.9;}
.of .l{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;}
.of .v{font-size:15px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.of .v i{color:var(--teal);font-size:18px;}
.of .v .ph-mut{color:var(--faint);font-weight:500;}
.obtn{flex:0 0 auto;align-self:center;margin:0 6px;background:var(--teal-d);color:#fff;border:none;font-family:inherit;font-size:15px;font-weight:700;padding:0 24px;height:52px;border-radius:13px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:background .15s;}
.obtn:hover{background:#085a6f;}
.ofoot{display:flex;align-items:center;gap:22px;padding:0 16px 12px;flex-wrap:wrap;}
.ofoot[hidden]{display:none;} /* honour the hidden attribute despite the display rule above */
.xs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);font-weight:600;cursor:pointer;user-select:none;}
.xs .sw{width:34px;height:20px;border-radius:999px;background:var(--line-2);position:relative;transition:background .18s;flex:0 0 auto;}
.xs .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s;}
.xs.on .sw{background:var(--teal);}
.xs.on .sw::after{transform:translateX(14px);}

.wave{display:block;width:100%;height:26px;color:var(--teal-50);}

/* ---------- Sections ---------- */
section .wrap{padding:56px var(--gutter);}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px;}
.sh h2{font-size:28px;font-weight:800;letter-spacing:-.015em;}
.sh .sub{font-size:14.5px;color:var(--muted);margin-top:5px;font-weight:500;}
.sh a.more{font-size:14.5px;color:var(--teal-d);font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.sh a.more i{transition:transform .15s ease;}
.sh a.more:hover i{transform:translateX(3px);}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* product type cards */
.ptype{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;display:block;}
.ptype img{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.ptype::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.6));}
.ptype:hover img{transform:scale(1.06);}
.ptype .lab{position:absolute;left:16px;bottom:15px;z-index:2;color:#fff;}
.ptype .lab .n{font-size:19px;font-weight:800;}
.ptype .lab .c{font-size:13px;opacity:.92;margin-top:2px;}

/* destination cards */
.card{cursor:pointer;display:block;}
.card .cph{aspect-ratio:4/3;border-radius:15px;position:relative;overflow:hidden;}
.card .cph img{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.card:hover .cph img{transform:scale(1.05);}
.card .cph .tag{position:absolute;left:11px;top:11px;background:var(--amber-50);color:var(--amber-d);font-size:12px;font-weight:800;padding:4px 11px;border-radius:999px;white-space:nowrap;}
.card .cph .heart{position:absolute;right:11px;top:10px;color:#fff;font-size:22px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));cursor:pointer;transition:transform .15s;}
.card .cph .heart:hover{transform:scale(1.15);}
.card .t{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:16px;font-weight:700;margin-top:11px;}
.card .t .ct{min-width:0;}
.card .t .rt{font-weight:700;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:4px;white-space:nowrap;flex:0 0 auto;line-height:1.5;}
.card .m{font-size:13.5px;color:var(--faint);margin-top:2px;}
.card .p{font-size:14.5px;margin-top:7px;color:var(--muted);}
.card .p b{font-weight:800;color:var(--ink);}

/* theme scroller */
.scroller{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;}
.scroller::-webkit-scrollbar{display:none;}
.theme{flex:0 0 230px;position:relative;border-radius:15px;overflow:hidden;aspect-ratio:5/6;}
.theme img{transition:transform .5s;}
.theme:hover img{transform:scale(1.06);}
.theme::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.5));}
.theme .lab{position:absolute;left:14px;bottom:13px;z-index:2;color:#fff;font-weight:800;font-size:17px;}
.theme .lab small{display:block;font-weight:600;font-size:12.5px;opacity:.9;}

/* para agencias band */
.agency{background:var(--teal-50);}
.agency .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:42px;align-items:center;}
.agency h2{font-size:28px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px;}
.agency .lead{font-size:15px;color:var(--muted);margin-bottom:22px;max-width:46ch;}
.agency .feats{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin-bottom:24px;}
.agency .ft{display:flex;gap:11px;align-items:flex-start;}
.agency .ft i{color:var(--teal-d);font-size:22px;margin-top:1px;}
.agency .ft b{font-weight:800;font-size:14.5px;display:block;}
.agency .ft span{font-size:13px;color:var(--muted);}
.agency .acta{display:flex;gap:12px;flex-wrap:wrap;}
.agency .acta a{padding:12px 20px;border-radius:11px;font-weight:800;font-size:14.5px;}
.agency .acta .pri{background:var(--teal-d);color:#fff;}
.agency .acta .pri:hover{background:#085a6f;}
.agency .acta .sec{border:1px solid var(--teal-d);color:var(--teal-d);}
.agency .acta .sec:hover{background:#fff;}
.pvw{background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow-float);padding:16px;}
.pvw .pvh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.pvw .pmode{display:flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;font-size:11.5px;font-weight:700;}
.pvw .pmode span{padding:5px 10px;border-radius:999px;color:var(--faint);}
.pvw .pmode span.on{background:var(--ink);color:#fff;}
.pvw .prow{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;}
.pvw .prow .pth{width:46px;height:46px;border-radius:9px;background:#CFE3E7;flex:0 0 auto;}
.pvw .prow .pn{flex:1;font-size:13.5px;font-weight:800;min-width:0;}
.pvw .prow .pn small{display:block;font-weight:500;color:var(--faint);font-size:12px;}
.pvw .prow .pp{text-align:right;font-size:12px;color:var(--faint);white-space:nowrap;}
.pvw .prow .pp b{display:block;font-size:16px;color:var(--ink);font-weight:800;}
@media(max-width:920px){.agency .wrap{grid-template-columns:1fr;gap:28px;}}

/* why band */
.why{background:var(--sand);}
.why-g{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.why-c .ic{width:48px;height:48px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pill);}
.why-c .ic i{font-size:25px;color:var(--teal);}
.why-c h3{font-size:17px;font-weight:800;margin:13px 0 5px;}
.why-c p{font-size:14px;color:var(--muted);}

/* trust / stats band */
.trust{background:var(--ink-deep);color:#EAF2F4;}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:34px var(--gutter);}
.stats{display:grid;grid-template-columns:repeat(3,max-content);gap:48px;align-items:start;}
.stat .n{font-size:30px;font-weight:800;letter-spacing:-.02em;color:#fff;}
.stat .l{font-size:13px;color:#AFC6CC;margin-top:2px;}
.creds{display:flex;align-items:center;gap:14px;font-size:13px;color:#AFC6CC;}
.creds .b{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:9px 14px;border-radius:11px;}
.creds .b i{font-size:18px;color:var(--amber);}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s;}
.step{counter-increment:s;position:relative;}
.step .n{width:38px;height:38px;border-radius:50%;background:var(--teal-50);color:var(--teal-d);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.step .n::before{content:counter(s);}
.step h3{font-size:16px;font-weight:800;margin-bottom:4px;}
.step p{font-size:13.5px;color:var(--muted);}

/* faq */
.faq details{border-bottom:1px solid var(--line-2);padding:18px 2px;}
.faq summary{font-size:16px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary i{color:var(--teal);transition:transform .2s;flex:0 0 auto;}
.faq details[open] summary i{transform:rotate(45deg);}
.faq p{font-size:14.5px;color:var(--muted);margin-top:11px;max-width:84ch;}

/* cta */
.cta{background:var(--teal-d);color:#fff;position:relative;overflow:hidden;}
.cta .sun{position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--amber) 0%,rgba(232,191,125,0) 70%);opacity:.45;}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:46px var(--gutter);position:relative;z-index:1;}
.cta h2{font-size:27px;font-weight:800;letter-spacing:-.01em;}
.cta p{opacity:.92;font-size:15px;margin-top:6px;}
.cta .b{display:flex;gap:12px;flex-wrap:wrap;}
.cta .b a{padding:14px 22px;border-radius:11px;font-weight:800;font-size:14.5px;}
.cta .b .pri{background:#fff;color:var(--teal-d);}
.cta .b .pri:hover{background:var(--sand);}
.cta .b .sec{border:1px solid rgba(255,255,255,.55);color:#fff;}
.cta .b .sec:hover{background:rgba(255,255,255,.1);}

/* footer */
footer{background:var(--ink-deep);color:#AFC6CC;font-size:13.5px;}
footer .wrap{padding:48px var(--gutter) 30px;}
.fcols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px;margin-bottom:30px;}
.fcols h4{color:#fff;font-size:13px;font-weight:800;margin-bottom:14px;letter-spacing:.03em;text-transform:uppercase;}
.fcols a{display:block;padding:4px 0;color:#AFC6CC;transition:color .12s;}
.fcols a:hover{color:#fff;}
.fbrand{color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#88A4AB;}
.fbot a{color:#88A4AB;}

.wa-fab{position:fixed;right:24px;bottom:24px;z-index:60;background:var(--teal);color:#fff;border-radius:999px;padding:13px 20px;font-size:14.5px;font-weight:800;display:flex;gap:9px;align-items:center;box-shadow:0 8px 26px rgba(14,141,172,.4);transition:transform .15s;}
.wa-fab:hover{transform:translateY(-2px);}

@media(max-width:920px){
  /* Collapse header labels to icons; keep the language switcher visible (icon-only) alongside user + menu. */
  .pill,.hr .lnk span.full,.hr .glb .full{display:none;}
  .hr .glb{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;gap:0;}
  .hero-c{padding:40px 0;}
  /* Wrap to two per row; reset the destination's wider flex so it doesn't get squished to a sliver. */
  .ofields{flex-wrap:wrap;}
  .of,.of.dest{flex:1 1 44%;border-right:none;border-bottom:1px solid var(--line);}
  /* Full-width via flex basis (not width:100%) so the side margins stay symmetric instead of overflowing right. */
  .obtn{flex:1 1 100%;width:auto;align-self:stretch;margin:10px 4px 2px;}
  .g4,.why-g,.steps{grid-template-columns:repeat(2,1fr);}
  .g3,.fcols{grid-template-columns:1fr 1fr;}
  .stats{gap:26px 30px;}
}
@media(max-width:560px){.g4,.g3,.fcols,.why-g,.steps{grid-template-columns:1fr;}.stats{grid-template-columns:1fr;gap:18px;}}
/* Phones: stack the omni fields full-width (nothing overlaps), let the tabs scroll horizontally,
   and make the search button full-width with even margins. */
@media(max-width:680px){
  .otabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;}
  .otabs::-webkit-scrollbar{display:none;}
  .otab{flex:0 0 auto;}
  .ofields{flex-direction:column;align-items:stretch;gap:0;padding:6px 8px 8px;}
  .of,.of.dest{flex:1 1 auto;width:100%;border-right:none;border-bottom:1px solid var(--line);}
  .ofields .of:last-of-type{border-bottom:none;}
  /* Column layout flips the main axis to height, so the wider rule's flex-basis:100% collapses the button.
     Reset to an explicit full-width, full-height, centered CTA on phones (the rest of the site is fine). */
  .obtn{flex:0 0 auto;width:100%;height:54px;justify-content:center;margin:10px 0 2px;font-size:16px;}
  .ofoot{gap:14px;}
}

/* Home omni date/passengers use the shared controls — anchor their popovers to the field. */
.ofields .of[data-control]{position:relative;cursor:pointer;}
.ofields .of[data-control] .v{cursor:pointer;}
@media(max-width:680px){
  .ofields .of[data-control] .popover{left:0;right:0;min-width:0;}
}