
:root{
  /* BASE — noche sobre el agua (mar / selva) */
  --ink:#0A1519;
  --ink-2:#10232C;
  --ink-3:#193A45;
  --wood:#4A3325;
  --line:rgba(236,244,244,.10);
  --line-2:rgba(236,244,244,.20);
  --white:#FFFFFF;
  --paper:#F5F1EA;               /* crema cálida SOLO para tipografía (atardecer sobre agua) */
  --muted:rgba(233,240,239,.62);
  --muted-2:rgba(233,240,239,.36);
  /* ACCIÓN — atardecer (usar con moderación: CTA · precio · urgencia · selección) */
  --accent:#E86A1F;
  --amber:#F4B13D;
  --accent-soft:rgba(232,106,31,.15);
  /* AGUA — laguna / teal (calma · mundo · lugar · comunidad) */
  --teal:#2FA7B8;
  --teal-lite:#63D0DC;
  --blue:#2E7FA6;
  --blue-lite:#6FC2DB;
  --teal-soft:rgba(47,167,184,.16);
  --blue-soft:rgba(46,127,166,.20);
  /* VIDA — jade / selva (naturaleza · tierra · WhatsApp) */
  --green:#3E9E63;
  --green-lite:#79D89C;
  --green-soft:rgba(62,158,99,.15);
  /* superficies vidrio (frías) */
  --glass:rgba(16,34,42,.55);
  --glass-2:rgba(24,50,60,.5);
  --glass-brd:rgba(230,240,240,.11);
  /* gradientes */
  --grad-warm:linear-gradient(102deg,#F4B13D 0%,#E86A1F 60%,#D9531A 100%);
  --grad-sky:linear-gradient(118deg,#63D0DC -6%,#2FA7B8 46%,#2E6FA6 118%);
  --grad-cool:linear-gradient(122deg,#79D8C4 0%,#2FA7B8 48%,#2E7FA6 104%);
  --grad-leaf:linear-gradient(102deg,#8FE0A6 0%,#4FB878 52%,#2E8A52 105%);
  --glow-warm:rgba(232,106,31,.28);
  --glow-teal:rgba(47,167,184,.42);
  --glow-blue:rgba(46,127,166,.40);
  --glow-green:rgba(62,158,99,.34);
  --shadow:0 34px 70px -34px rgba(0,0,0,.72);
  --shadow-s:0 18px 40px -22px rgba(0,0,0,.6);
  --r:18px;--r-s:12px;--r-l:26px;
  --disp:"Poppins",sans-serif;
  --body:"Poppins",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:
    radial-gradient(1200px 720px at 82% -8%, rgba(47,167,184,.22), transparent 58%),   /* agua · teal */
    radial-gradient(1040px 660px at -10% 20%, rgba(62,158,99,.16), transparent 56%),     /* selva · verde */
    radial-gradient(720px 520px at 98% 66%, rgba(232,106,31,.10), transparent 60%),        /* atardecer · naranja (pequeño) */
    radial-gradient(1150px 800px at 48% 122%, rgba(13,40,50,.55), transparent 66%),         /* mar profundo · abajo */
    var(--ink);
  background-attachment:fixed;color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;position:relative}
/* filmic grain */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:2}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.wrap{max-width:1280px;margin:0 auto;padding:0 36px}
.eyebrow{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent)}
.accent{color:var(--accent)}
.num{font-family:var(--disp);font-weight:800;color:var(--accent);font-size:13px;letter-spacing:.05em}

/* images */
.photo{position:relative;background-size:cover;background-position:center;overflow:hidden;background-color:var(--ink-3)}
.photo>.im{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.veil::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,23,28,.92) 100%)}
.veil-l::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,23,28,.9) 0%,rgba(10,23,28,.5) 42%,rgba(10,23,28,.28) 100%),linear-gradient(180deg,rgba(10,23,28,.45),transparent 38%,rgba(10,23,28,.95))}

/* ghost word */
.ghost{position:absolute;left:0;top:-.3em;font-family:var(--disp);font-weight:900;text-transform:uppercase;color:rgba(245,241,236,.035);white-space:nowrap;letter-spacing:-.03em;pointer-events:none;z-index:0;line-height:1}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;padding:14px 30px;border-radius:100px;transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s}
.btn-primary{background:var(--white);color:var(--ink)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-2);color:var(--paper)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.05)}
.btn-red{background:var(--accent);color:#fff}
.btn-red:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:300;transition:width .1s linear}

/* top nav */
.topbar{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .4s var(--ease),height .4s var(--ease),border-color .4s}
.topbar .nav{display:flex;align-items:center;justify-content:space-between;height:84px;transition:height .4s var(--ease)}
.topbar.shrink{background:rgba(10,23,28,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.topbar.shrink .nav{height:64px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:.02em;text-transform:uppercase}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(232,106,31,.7)}
.brand .lite{font-weight:500;color:var(--muted)}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);position:relative;padding:8px 0;transition:color .25s}
.nav-links a:hover,.nav-links a.on{color:var(--white)}
.nav-links a.on::after{content:"";position:absolute;left:0;width:18px;bottom:0;height:2px;background:var(--accent)}
.nav-right{display:flex;align-items:center;gap:24px}
.lang{display:flex;gap:5px;font-size:12px;font-weight:600;color:var(--muted-2);letter-spacing:.08em}
.lang button{padding:3px 5px;transition:.2s}
.lang button.on{color:var(--white)}
.lang button:hover{color:var(--paper)}
.burger{display:none;font-size:24px}

/* screens */
.screen{display:none}
.screen.active{display:block}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);filter:blur(7px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}.photo>.im{transition:none!important}*{scroll-behavior:auto!important}}

/* ---------- HOME hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end}
.hero .photo{position:absolute;inset:0}
.hero .photo.veil-l::after{}
.hero-index{position:absolute;top:34vh;right:36px;z-index:4;text-align:right;font-family:var(--disp);font-weight:700}
.hero-index .ix{font-size:15px;color:var(--muted-2);padding:6px 0;transition:.4s var(--ease)}
.hero-index .ix.on{color:var(--white);font-size:32px;display:flex;align-items:center;justify-content:flex-end;gap:14px}
.hero-index .ix.on::before{content:"";width:46px;height:2px;background:var(--accent)}
.hero-top{position:relative;z-index:3;flex:1;display:flex;align-items:flex-end;padding-bottom:20px}
.hero-top .wrap{width:100%}
.hero h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(50px,10vw,150px);line-height:.82;letter-spacing:-.035em}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.hero.loaded h1 .ln span{transform:none}
.hero h1 .ln:nth-child(2) span{transition-delay:.12s}
.hero-sub{margin-top:22px;max-width:420px;color:rgba(245,241,236,.82);font-size:16px}
.hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
/* hero bottom strip: 3 columns + swipe (ref-style) */
.hero-strip{position:relative;z-index:3;border-top:1px solid var(--line)}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:36px;padding:26px 36px;align-items:start}
.hcol{display:flex;gap:14px}
.hcol p{font-size:13px;color:var(--muted);line-height:1.6}
.hcol p b{display:block;color:var(--paper);font-weight:600;font-size:13.5px;margin-bottom:3px}
.swipe{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);white-space:nowrap;align-self:center}
.swipe .ln{width:44px;height:2px;background:var(--accent);position:relative;overflow:hidden}
.swipe .ln::after{content:"";position:absolute;inset:0;background:var(--white);animation:slide 2.4s infinite var(--ease)}
@keyframes slide{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* price chips over hero */
.pricechips{display:flex;gap:22px;margin-top:30px}
.pricechips .pc .l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.pricechips .pc .a{font-family:var(--disp);font-weight:800;font-size:30px;line-height:1.1;margin-top:3px}
.pricechips .pc.pre .a{color:var(--accent)}
.pricechips .pc .u{font-size:11px;color:var(--muted-2)}

/* sections */
.section{position:relative;padding:120px 0}
.sec-head{position:relative;margin-bottom:52px}
.sec-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(32px,4.6vw,58px);line-height:1;letter-spacing:-.025em;position:relative;z-index:1;margin-top:16px}
.sec-head p{color:var(--muted);margin-top:16px;max-width:560px;position:relative;z-index:1}
.center{text-align:center}.center .eyebrow{justify-content:center}

/* recommendation cards */
.recs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.rec{cursor:pointer}
.rec .img{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4}
.rec:hover .im{transform:scale(1.08)}
.rec .state{position:absolute;z-index:3;top:14px;left:14px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:100px;background:rgba(10,23,28,.55);backdrop-filter:blur(6px);border:1px solid var(--line-2)}
.rec .state.hot{background:var(--accent);border:none;color:#fff}
.rec .meta{padding:18px 2px 0}
.rec .meta .top{display:flex;align-items:baseline;gap:10px}
.rec .meta h3{font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:-.01em}
.rec .meta .sub{font-size:13px;color:var(--muted);margin-top:3px}
.rec .meta .row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rec .meta .date{font-size:12.5px;color:var(--muted-2)}
.rec .meta .price{font-family:var(--disp);font-weight:800;font-size:17px}
.recs-foot{display:flex;justify-content:center;margin-top:50px}

/* vibe — airy, hairline separated */
.vibe{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.vibe-item{padding:0 30px}
.vibe-item+.vibe-item{border-left:1px solid var(--line)}
.vibe-item .ic{font-size:26px;margin-bottom:18px}
.vibe-item h4{font-family:var(--disp);font-weight:700;font-size:18px;margin-bottom:8px}
.vibe-item p{font-size:13.5px;color:var(--muted);line-height:1.6}

/* community */
.community{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.comm-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.comm-grid h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.2vw,50px);line-height:1;letter-spacing:-.025em;margin-top:16px}
.comm-stats{display:flex;gap:44px;margin-top:34px;flex-wrap:wrap}
.stat .n{font-family:var(--disp);font-weight:800;font-size:44px;line-height:1}
.stat .t{font-size:12.5px;color:var(--muted);margin-top:5px}
.flags{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.flag{padding:8px 14px;border-radius:100px;background:var(--ink-2);border:1px solid var(--line);font-size:13.5px;display:flex;align-items:center;gap:7px;transition:.25s}
.flag:hover{border-color:var(--line-2);transform:translateY(-2px)}
.comm-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;position:relative}
.comm-photo .cap{position:absolute;z-index:2;bottom:24px;left:24px;right:24px}
.comm-photo .cap .big{font-family:var(--disp);font-weight:700;font-size:24px}

/* enjoy closing */
.enjoy{position:relative;overflow:hidden}
.enjoy .photo{position:absolute;inset:0}
.enjoy .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,23,28,.72),rgba(10,23,28,.9))}
.enjoy-inner{position:relative;z-index:2;padding:130px 0}
.enjoy h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(40px,7vw,96px);line-height:.84;letter-spacing:-.035em}
.enjoy-play{display:flex;align-items:center;gap:16px;margin-top:34px;cursor:pointer;width:fit-content}
.enjoy-play .pbtn{width:58px;height:58px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:15px;transition:.35s var(--ease)}
.enjoy-play:hover .pbtn{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.enjoy-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:64px;gap:30px;flex-wrap:wrap}
.enjoy-bottom p{max-width:360px;font-size:13.5px;color:var(--muted);line-height:1.65}
.enjoy-thumbs{display:flex;gap:14px}
.enjoy-thumb{width:158px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;position:relative}
.enjoy-ig{position:absolute;bottom:26px;right:36px;z-index:3;font-size:13px;color:var(--muted)}

/* ---------- TRIP DETAIL ---------- */
.trip-hero{position:relative;min-height:92vh;display:flex;align-items:flex-end}
.trip-hero .photo{position:absolute;inset:0}
.trip-hero-inner{position:relative;z-index:2;width:100%;padding-bottom:52px}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:24px;transition:.2s}
.back-link:hover{color:var(--white)}
.trip-hero .place{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:600}
.trip-hero h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(44px,8vw,116px);line-height:.83;letter-spacing:-.035em;margin-top:12px}
.trip-hero .quick{display:flex;gap:30px;flex-wrap:wrap;margin-top:26px}
.trip-hero .quick .qi{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--paper)}
.trip-hero .quick .qi b{font-weight:600}

.subnav{position:sticky;top:0;z-index:150;background:rgba(10,23,28,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.subnav-inner{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav a{padding:20px 22px;font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap;position:relative;transition:color .25s}
.subnav a:hover,.subnav a.on{color:var(--white)}
.subnav a.on::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;background:var(--accent)}

.tsec{position:relative;padding:100px 0;scroll-margin-top:70px}
.tsec:not(:last-child){border-bottom:1px solid var(--line)}

.destino-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.destino-grid .lead{color:var(--paper);font-size:18px;line-height:1.75}
.chips{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
.chips span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.destino-img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;position:relative}

/* incluye — airy row */
.included{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inc-card{padding:30px}
.inc-card+.inc-card{border-left:1px solid var(--line)}
.inc-card .ic{font-size:24px;margin-bottom:16px}
.inc-card .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.inc-card .v{font-family:var(--disp);font-weight:700;font-size:19px;margin-top:6px}

.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.addon{border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);background:var(--ink-2);transition:.35s var(--ease)}
.addon:hover{transform:translateY(-4px);border-color:var(--line-2)}
.addon .top{position:relative;aspect-ratio:16/10}
.addon:hover .im{transform:scale(1.07)}
.addon .tag{position:absolute;top:12px;left:12px;z-index:3;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 11px;border-radius:100px;background:rgba(10,23,28,.65);backdrop-filter:blur(6px)}
.addon .plus{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--disp);font-weight:800;font-size:14px;padding:6px 12px;border-radius:100px;background:var(--accent);color:#fff}
.tag.t-amber{background:rgba(244,177,61,.9);color:#161210;border:none}
.tag.t-green{background:rgba(78,124,50,.92);color:#fff;border:none}
.tag.t-blue{background:rgba(40,90,138,.92);color:#fff;border:none}
.state.s-amber{color:var(--amber);border-color:rgba(244,177,61,.5)}
.state.s-blue{color:#7db0e0;border-color:rgba(40,90,138,.6)}
.state.s-green{color:#8fce6a;border-color:rgba(78,124,50,.6)}
.cupos.ok{color:var(--green)}
.addon .b{padding:18px}
.addon .b h4{font-family:var(--disp);font-weight:700;font-size:17px}
.addon .b p{font-size:13px;color:var(--muted);margin-top:5px}

/* itinerary — day cards with image */
.itin{display:flex;flex-direction:column;gap:18px}
.iday{display:grid;grid-template-columns:200px 1fr;gap:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-2);transition:.35s var(--ease)}
.iday:hover{border-color:var(--line-2)}
.iday .im-wrap{position:relative;min-height:170px;overflow:hidden}
.iday:hover .im{transform:scale(1.07)}
.iday .txt{padding:26px 30px 26px 0;display:flex;flex-direction:column;justify-content:center}
.iday .day{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.iday h4{font-family:var(--disp);font-weight:700;font-size:22px;margin:8px 0 8px}
.iday p{color:var(--muted);font-size:14.5px;max-width:620px}
.iday .times{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.iday .times span{font-size:12px;color:var(--muted-2);display:flex;gap:6px;align-items:center}

/* recuerdos gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:14px;margin-top:8px}
.gallery .g{border-radius:12px;overflow:hidden;position:relative}
.gallery .g:hover .im{transform:scale(1.09)}
.gallery .g.big{grid-column:span 2;grid-row:span 2}
.gallery .g .cap{position:absolute;z-index:2;bottom:12px;left:14px;font-size:12.5px;font-weight:600}

/* salida */
.departs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.depart{display:grid;grid-template-columns:160px 1fr;border-radius:var(--r-s);overflow:hidden;background:var(--ink-2);border:1px solid var(--line)}
.depart .map{position:relative}
.depart .map .pin{position:absolute;z-index:2;top:46%;left:50%;transform:translate(-50%,-100%);font-size:26px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.depart .info{padding:22px}
.depart .info .city{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.depart .info .time{font-family:var(--disp);font-weight:700;font-size:22px;margin:5px 0}
.depart .info .addr{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:16px}
.depart .actions{display:flex;gap:10px}
.mini-btn{flex:1;text-align:center;font-size:12px;font-weight:600;padding:11px;border-radius:9px;border:1px solid var(--line-2);transition:.2s}
.mini-btn:hover{background:rgba(255,255,255,.06);border-color:var(--white)}
.mini-btn.uber{background:#000;border-color:#000}

/* calendario / fechas */
.dates{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:stretch}
.date-card{padding:34px;border-radius:var(--r);border:1px solid var(--line);background:var(--ink-2);display:flex;flex-direction:column;justify-content:center}
.date-card .big{font-family:var(--disp);font-weight:800;font-size:48px;line-height:.9}
.date-card .sub{color:var(--muted);margin-top:10px;font-size:14px}
.price-split{display:flex;gap:36px}
.lbl-a{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* reservar */
.reserve-grid{display:grid;grid-template-columns:1fr .82fr;gap:40px;align-items:start}
.field{margin-bottom:20px}
.field label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input{width:100%;padding:15px 16px;border-radius:11px;background:var(--ink-2);border:1px solid var(--line-2);color:var(--paper);font-size:15px;font-family:inherit;transition:.2s}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opt-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.opt{padding:18px;border-radius:11px;border:1px solid var(--line-2);background:var(--ink-2);cursor:pointer;transition:.25s var(--ease);text-align:center}
.opt:hover{background:var(--ink-3)}
.opt.on{border-color:var(--accent);background:var(--accent-soft)}
.opt .t{font-family:var(--disp);font-weight:700;font-size:16px}
.opt .s{font-size:12px;color:var(--muted);margin-top:2px}
.pay-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.pay{padding:16px 8px;border-radius:11px;border:1px solid var(--line-2);background:var(--ink-2);cursor:pointer;text-align:center;transition:.25s}
.pay:hover{background:var(--ink-3)}
.pay.on{border-color:var(--accent);background:var(--accent-soft)}
.pay .ic{font-size:20px}
.pay .t{font-size:10.5px;color:var(--muted);margin-top:5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.summary{position:sticky;top:90px;padding:30px;border-radius:var(--r);background:var(--ink-2);border:1px solid var(--line)}
.summary h3{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:20px}
.sum-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.sum-line .m{color:var(--muted)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:18px;margin-top:8px}
.sum-total .l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sum-total .v{font-family:var(--disp);font-weight:800;font-size:34px}
.summary .btn{width:100%;justify-content:center;margin-top:20px}
.summary .note{font-size:11.5px;color:var(--muted-2);text-align:center;margin-top:12px}

/* CALENDAR screen */
.cal-hero{padding:150px 0 44px;position:relative}
.cal-hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(44px,7.5vw,104px);line-height:.84;text-transform:uppercase;letter-spacing:-.035em;position:relative;z-index:1}
.cal-filters{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.chip{padding:10px 20px;border-radius:100px;border:1px solid var(--line-2);font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:.25s}
.chip:hover{color:var(--white)}
.chip.on{background:var(--white);color:var(--ink);border-color:var(--white)}
.cal-list{padding-bottom:120px;border-top:1px solid var(--line)}
.cal-row{display:grid;grid-template-columns:100px 120px 1fr auto;gap:28px;align-items:center;padding:22px 8px;border-bottom:1px solid var(--line);cursor:pointer;transition:.35s var(--ease)}
.cal-row:hover{background:var(--ink-2);padding-left:20px}
.cal-thumb{width:100px;height:66px;border-radius:10px;overflow:hidden;position:relative}
.cal-row:hover .im{transform:scale(1.08)}
.cal-date{text-align:center}
.cal-date .dd{font-family:var(--disp);font-weight:800;font-size:34px;line-height:.9}
.cal-date .mm{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:4px;font-weight:600}
.cal-mid .place{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.cal-mid h3{font-family:var(--disp);font-weight:700;font-size:23px;text-transform:uppercase;margin:5px 0 8px}
.cal-mid .meta{display:flex;gap:18px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.cal-end{text-align:right}
.cal-end .price{font-family:var(--disp);font-weight:800;font-size:23px}
.cal-end .cupos{font-size:12px;margin-top:4px;color:var(--muted)}
.cal-end .cupos.low{color:var(--accent)}

/* footer */
.footer{border-top:1px solid var(--line);padding:64px 0 34px}
.foot-top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-brand{max-width:320px}
.foot-brand p{color:var(--muted);font-size:13.5px;margin-top:16px;line-height:1.65}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.foot-col a{display:block;font-size:13.5px;color:var(--muted);padding:5px 0;transition:.2s}
.foot-col a:hover{color:var(--white)}
.foot-bot{display:flex;justify-content:space-between;padding-top:26px;font-size:12.5px;color:var(--muted-2);flex-wrap:wrap;gap:14px}

.wa-float{position:fixed;bottom:26px;right:26px;z-index:200;display:flex;align-items:center;gap:10px;background:var(--ink-2);border:1px solid var(--line-2);color:var(--paper);padding:13px 20px;border-radius:100px;font-weight:600;font-size:14px;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);transition:transform .3s var(--ease)}
.wa-float .wa{width:9px;height:9px;border-radius:50%;background:#25D366;box-shadow:0 0 10px rgba(37,211,102,.7)}
.wa-float:hover{transform:translateY(-3px);border-color:var(--white)}

.proto-note{position:relative;z-index:210;background:var(--ink-2);border-bottom:1px solid var(--line);text-align:center;font-size:12px;color:var(--muted);padding:9px 20px}
.proto-note .accent{color:var(--accent)}

@media(max-width:980px){
  .nav-links,.lang{display:none}.burger{display:block}
  .recs{grid-template-columns:repeat(2,1fr)}
  .included,.vibe{grid-template-columns:repeat(2,1fr)}
  .inc-card,.vibe-item{border-left:none!important}
  .comm-grid,.reserve-grid,.departs,.dates,.destino-grid{grid-template-columns:1fr}
  .hero-strip .wrap{grid-template-columns:1fr 1fr;gap:22px}.swipe{display:none}
  .addons{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}
  .pay-row{grid-template-columns:repeat(2,1fr)}.summary{position:static}
  .hero-index{display:none}
  .iday{grid-template-columns:1fr}.iday .im-wrap{min-height:180px}.iday .txt{padding:24px}
  .cal-row{grid-template-columns:70px 1fr;gap:14px}.cal-thumb{display:none}.cal-end{grid-column:2;text-align:left}
  .enjoy-bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .wrap,.hero-strip .wrap{padding-left:20px;padding-right:20px}
  .recs,.included,.vibe,.addons,.gallery{grid-template-columns:1fr}
  .gallery{grid-auto-rows:200px}.gallery .g.big{grid-column:span 1;grid-row:span 1}
  .hero-strip .wrap{grid-template-columns:1fr}
  .depart{grid-template-columns:1fr}.depart .map{aspect-ratio:16/9}
  .price-split{gap:24px}
}

/* ================= v5 UPGRADES ================= */
/* gradient text + warm button */
.grad-text{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.btn-grad{background:var(--grad-warm);color:#fff;box-shadow:0 12px 30px -12px var(--glow-warm)}
.btn-grad:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-primary{box-shadow:0 12px 30px -16px rgba(0,0,0,.6)}
.btn:focus-visible,.chip:focus-visible,.opt:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}

/* glassy surfaces (soft-override of flat panels) */
.summary,.date-card,.depart,.addon,.iday,.flag{background:linear-gradient(180deg,var(--glass-2),var(--glass));backdrop-filter:blur(10px);border-color:var(--glass-brd)}
.field input{background:var(--glass);backdrop-filter:blur(8px)}

/* ---------- HERO SLIDER (v5) ---------- */
.hero{overflow:hidden}
.slides{position:absolute;inset:0;z-index:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.15s var(--ease)}
.slide.on{opacity:1}
.slide .photo{position:absolute;inset:0}
.slide .im{transform:scale(1.06);transition:transform 8s linear}
.slide.on .im{transform:scale(1.16)}
.hero .hero-index{cursor:default;z-index:6}
.hero-index .ix{cursor:pointer;font-variant-numeric:tabular-nums}
.hero-count{position:absolute;top:calc(34vh - 46px);right:36px;z-index:6;font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--muted-2)}
.hero-count b{color:var(--white)}
/* category pill */
.hero-cat{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 12px;border-radius:100px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-brd);font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:20px}
.hero-cat .cd{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--glow-warm)}
/* staggered swap animation for hero content */
#heroContent .an{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
#heroContent.show .an{opacity:1;transform:none}
#heroContent.show .a1{transition-delay:.04s}
#heroContent.show .a2{transition-delay:.12s}
#heroContent.show .a3{transition-delay:.20s}
#heroContent.show .a4{transition-delay:.28s}
#heroContent.show .a5{transition-delay:.36s}
#heroContent h1{overflow:hidden}
/* prev / next */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-brd);color:var(--paper);font-size:18px;transition:.3s var(--ease);opacity:.55}
.hero-arrow:hover{opacity:1;background:var(--accent);border-color:var(--accent);transform:translateY(-50%) scale(1.06)}
.hero-arrow.prev{left:24px}.hero-arrow.next{right:24px}
/* segmented progress in strip */
.hero-strip .wrap{grid-template-columns:repeat(3,1fr) auto;align-items:center}
.hero-progress{display:flex;gap:8px;align-self:center}
.hp-seg{width:34px;height:3px;border-radius:100px;background:var(--line-2);overflow:hidden;cursor:pointer}
.hp-seg i{display:block;height:100%;width:0;background:var(--grad-warm)}
.hp-seg.on i{animation:fill var(--dur,6.5s) linear forwards}
.hp-seg.done i{width:100%}
@keyframes fill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.slide .im{transition:none}.hp-seg.on i{animation:none;width:100%}#heroContent .an{opacity:1;transform:none;transition:none}}

/* ---------- COMO FUNCIONA (steps) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
.step{position:relative;padding:34px 30px;border-radius:var(--r-l);background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--glass-brd);backdrop-filter:blur(10px);transition:.4s var(--ease)}
.step:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow-s)}
.step .sn{font-family:var(--disp);font-weight:900;font-size:52px;line-height:1;background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.step h4{font-family:var(--disp);font-weight:700;font-size:20px;margin:14px 0 8px}
.step p{color:var(--muted);font-size:14px;line-height:1.6}
.step .si{position:absolute;top:32px;right:30px;font-size:22px;opacity:.85}

/* ---------- TESTIMONIOS ---------- */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{padding:30px;border-radius:var(--r-l);background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--glass-brd);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:16px;transition:.4s var(--ease)}
.tcard:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow-s)}
.tcard .stars{color:var(--amber);font-size:14px;letter-spacing:2px}
.tcard .q{font-size:15.5px;line-height:1.65;color:var(--paper)}
.tcard .who{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:6px}
.tcard .av{width:44px;height:44px;border-radius:50%;overflow:hidden;position:relative;flex:none;border:1px solid var(--glass-brd)}
.tcard .who .nm{font-weight:600;font-size:14.5px}
.tcard .who .rl{font-size:12.5px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:26px 4px;font-family:var(--disp);font-weight:600;font-size:19px;transition:color .25s}
.faq-q:hover{color:var(--white)}
.faq-q .ic{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:18px;transition:.35s var(--ease)}
.faq-item.open .faq-q .ic{background:var(--accent);border-color:var(--accent);transform:rotate(135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{color:var(--muted);font-size:14.5px;line-height:1.7;padding:0 4px 26px;max-width:680px}

/* ---------- NEWSLETTER ---------- */
.news{position:relative;border-radius:var(--r-l);overflow:hidden;padding:1px;background:var(--grad-cool)}
.news-in{border-radius:calc(var(--r-l) - 1px);background:linear-gradient(160deg,#0d1a22 0%,#122430 45%,#0b1a1e 105%);padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.news-in::before{content:"";position:absolute;width:520px;height:520px;left:-140px;bottom:-220px;background:radial-gradient(circle,var(--glow-blue),transparent 62%);pointer-events:none}
.news-in::after{content:"";position:absolute;width:380px;height:380px;right:-70px;top:-150px;background:radial-gradient(circle,rgba(62,158,99,.16),transparent 64%);pointer-events:none}
.news h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.4vw,42px);line-height:1.02;letter-spacing:-.02em;position:relative}
.news p{color:var(--muted);margin-top:14px;max-width:420px;font-size:14.5px;position:relative}
.news-form{display:flex;gap:10px;position:relative}
.news-form input{flex:1;padding:16px 18px;border-radius:100px;background:var(--glass);border:1px solid var(--line-2);color:var(--paper);font-family:inherit;font-size:15px}
.news-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.news-note{font-size:12px;color:var(--muted-2);margin-top:12px}

/* destination card polish */
.rec{transition:transform .4s var(--ease)}
.rec:hover{transform:translateY(-6px)}
.rec .img::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 55%,rgba(10,23,28,.55));pointer-events:none}
.rec .img{box-shadow:var(--shadow-s)}

@media(max-width:980px){
  .steps,.testi{grid-template-columns:1fr}
  .news-in{grid-template-columns:1fr;padding:38px}
  .hero-arrow{display:none}
  .hero-count{display:none}
}
/* ================= v6 ================= */
.sky-text{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.eyebrow.cool::before{background:var(--blue-lite)}
.stat .n.c-o{color:var(--accent)}
.stat .n.c-b{color:var(--blue-lite)}
.brand .dot{box-shadow:0 0 12px rgba(232,106,31,.5)}

/* urgency chip (cool) */
.urgency{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 16px;border-radius:100px;background:var(--blue-soft);border:1px solid rgba(107,166,214,.30);font-size:13px;color:#cfe2f2;font-weight:500}
.urgency b{font-family:var(--disp);font-weight:800;color:#fff;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.urgency .pulse{width:8px;height:8px;border-radius:50%;background:var(--blue-lite);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(107,166,214,.5)}70%{box-shadow:0 0 0 9px rgba(107,166,214,0)}100%{box-shadow:0 0 0 0 rgba(107,166,214,0)}}

/* rec cupos */
.rec .fill{height:4px;border-radius:100px;background:rgba(246,242,236,.12);overflow:hidden;margin-top:14px}
.rec .fill span{display:block;height:100%;border-radius:100px;background:var(--grad-warm)}
.rec .fill span.low{background:linear-gradient(90deg,#F4B13D,#E86A1F)}
.rec .fill span.blue{background:var(--grad-cool)}
.rec .seats{font-size:12px;color:var(--muted);margin-top:8px}
.rec .seats b{color:var(--paper);font-weight:700}
.rec .seats b.lowc{color:var(--accent)}
.rec .seats.blues{color:var(--blue-lite)}

/* tilt + magnetic */
.tilt{transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s}
.btn-grad,.btn-primary{will-change:transform}

/* marquee */
.marquee{margin-top:10px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:18px;width:max-content;animation:scroll-x 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll-x{to{transform:translateX(-50%)}}
.mq{position:relative;width:262px;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;flex:none;border:1px solid var(--glass-brd)}
.mq figcaption{position:absolute;z-index:2;left:16px;bottom:14px;font-family:var(--disp);font-weight:700;font-size:15px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.mq::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(10,23,28,.72))}
.mq .im{transition:transform 1s var(--ease)}
.mq:hover .im{transform:scale(1.08)}
.ig-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:30px}
.ig-handle{font-family:var(--disp);font-weight:800;font-size:18px;background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ig-note{font-size:13px;color:var(--muted)}

/* sticky booking bar */
.book-bar{position:fixed;left:0;right:0;bottom:0;z-index:180;background:rgba(9,22,27,.82);backdrop-filter:blur(18px);border-top:1px solid var(--glass-brd);transform:translateY(110%);transition:transform .5s var(--ease)}
.book-bar.show{transform:none}
.book-in{display:flex;align-items:center;gap:24px;padding:14px 36px}
.book-info{display:flex;flex-direction:column}
.book-info .bt{font-family:var(--disp);font-weight:700;font-size:16px}
.book-info .bd{font-size:12.5px;color:var(--muted)}
.book-price{margin-left:auto;text-align:right;display:flex;flex-direction:column}
.book-price .bp-pre{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--accent)}
.book-price .bp-l{font-size:11px;color:var(--muted-2)}
.book-bar .btn{white-space:nowrap}

@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.urgency .pulse{animation:none}}
@media(max-width:680px){.book-price{display:none}.book-in{padding:12px 20px;gap:14px}.book-info .bt{font-size:14px}}
/* blue role: community atmosphere + location touches */
.community{position:relative;overflow:hidden}
.community::before{content:"";position:absolute;left:-8%;top:0;width:560px;height:560px;background:radial-gradient(circle,rgba(47,111,166,.22),transparent 62%);pointer-events:none;z-index:0}
.community .wrap{position:relative;z-index:1}
.flag:hover{border-color:rgba(107,166,214,.5);background:var(--blue-soft)}
.mini-btn:not(.uber):hover{border-color:var(--blue-lite);background:var(--blue-soft)}
.comm-photo .cap .big{color:#fff}

/* ================= v7: agua · naturaleza · vida ================= */
/* WhatsApp = verde (color natural + verde naturaleza de la paleta) */
.btn-wa{background:linear-gradient(102deg,#4FC46A 0%,#2E9E51 55%,#256B38 100%);color:#fff;box-shadow:0 12px 30px -12px rgba(37,150,80,.42)}
.btn-wa:hover{transform:translateY(-2px);filter:brightness(1.05)}
.wa-float{background:linear-gradient(102deg,#3FB862 0%,#2E9E51 60%,#22703C 100%);border-color:transparent;color:#fff;box-shadow:0 18px 44px -16px rgba(37,150,80,.5)}
.wa-float .wa{background:#eafff1;box-shadow:0 0 10px rgba(255,255,255,.6)}
.wa-float:hover{border-color:rgba(255,255,255,.42)}
/* verde = vida / naturaleza */
.leaf-text{background:linear-gradient(102deg,#8FCE6A 0%,#5B8C3A 55%,#4E7C32 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* cierre cinematográfico más en calma (azul agua) */
.enjoy::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(900px 520px at 16% 32%, rgba(47,111,166,.20), transparent 60%)}
.enjoy-inner{position:relative;z-index:2}
.enjoy-play:hover .pbtn{background:var(--blue);border-color:var(--blue)}
/* @handle = comunidad (azul) */
.ig-handle{background:var(--grad-cool)}

/* ================================================================
   v8 · ARMONÍA — agua · tierra · vida
   Regla: el naranja se reserva para ACCIÓN · PRECIO · SELECCIÓN.
   El agua (teal/azul) y la vida (verde) llevan el ambiente.
   ================================================================ */

/* — aurora ambiental viva (calma, no distrae; respeta reduced-motion) — */
body::after{content:"";position:fixed;inset:-20% -10% -10% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 560px at 20% 26%, rgba(47,167,184,.16), transparent 60%),
    radial-gradient(680px 520px at 80% 62%, rgba(62,158,99,.13), transparent 62%);
  filter:blur(6px);opacity:.9;animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,1.5%,0) scale(1.03)}
}
body>*{position:relative;z-index:2}

/* — estructura fría por defecto — */
.eyebrow::before{background:var(--teal-lite)}         /* marcador de sección = agua */
.eyebrow.warm::before{background:var(--accent)}        /* acción / reservar */
.eyebrow.leaf::before{background:var(--green-lite)}    /* vida / naturaleza */
.eyebrow.cool::before{background:var(--teal-lite)}
.progress{background:var(--grad-cool)}                  /* barra de scroll = agua */
.swipe .ln{background:var(--teal-lite)}
.hp-seg i{background:var(--grad-cool)}                  /* slider hero = agua */
.hp-seg.on i{background:var(--grad-cool)}

/* — hero: acentos en calma (el punto de categoría lo pinta el JS por viaje) — */
.hero-index .ix.on::before{background:var(--teal-lite)}
.hero-count b{color:var(--teal-lite)}
.hero-arrow:hover{background:var(--teal);border-color:var(--teal)}
.hero-cat .cd{box-shadow:0 0 10px var(--glow-teal)}

/* — palabras en gradiente más luminosas — */
.leaf-text{background:var(--grad-leaf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sky-text{background:var(--grad-sky);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* — WhatsApp = verde jade, presencia plena y consistente — */
.btn-wa{background:linear-gradient(102deg,#5AD07E 0%,#33AE5E 55%,#238046 100%);color:#fff;
  box-shadow:0 14px 34px -14px rgba(51,174,94,.5)}
.btn-wa:hover{transform:translateY(-2px);filter:brightness(1.05)}
.wa-float{background:linear-gradient(102deg,#4BC672 0%,#33AE5E 60%,#238046 100%);border-color:transparent;
  box-shadow:0 20px 48px -18px rgba(51,174,94,.55)}
.wa-float .wa{background:#eafff1}
.book-bar .btn-wa{box-shadow:0 10px 26px -12px rgba(51,174,94,.5)}

/* — atmósferas de sección por significado (piscinas de luz suaves) — */
.community::before{background:radial-gradient(circle,rgba(47,167,184,.22),transparent 62%)!important}
.enjoy::after{background:radial-gradient(920px 540px at 16% 30%, rgba(47,167,184,.22), transparent 60%)!important}
.enjoy-play:hover .pbtn{background:var(--teal);border-color:var(--teal)}

/* verde en el momento de comunidad/vida (testimonios) */
#home .section:has(.testi){position:relative;overflow:hidden}
#home .section:has(.testi)::before{content:"";position:absolute;right:-6%;top:8%;width:560px;height:560px;
  background:radial-gradient(circle,rgba(62,158,99,.18),transparent 62%);pointer-events:none;z-index:0}
#home .section:has(.testi) .wrap{position:relative;z-index:1}
.tcard .stars{color:var(--amber)}
.flag:hover{border-color:rgba(99,208,220,.5);background:var(--teal-soft)}
.mini-btn:not(.uber):hover{border-color:var(--teal-lite);background:var(--teal-soft)}
.ig-handle{background:var(--grad-cool)}

/* teal detrás de las recomendaciones (lugares junto al agua) */
#home .section:has(.recs){position:relative;overflow:hidden}
#home .section:has(.recs)::before{content:"";position:absolute;left:-8%;bottom:-6%;width:620px;height:620px;
  background:radial-gradient(circle,rgba(47,167,184,.14),transparent 62%);pointer-events:none;z-index:0}
#home .section:has(.recs) .wrap{position:relative;z-index:1}

/* — foco accesible en tono agua — */
.btn:focus-visible,.chip:focus-visible,.opt:focus-visible,.pay:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--teal-lite);outline-offset:3px;border-radius:8px}

/* — motion estilo Apple: reveal más suave y con micro-escala — */
.reveal{transform:translateY(30px) scale(.985);filter:blur(8px);
  transition:opacity 1s var(--ease-out),transform 1.05s var(--ease-out),filter 1s var(--ease-out)}
.reveal.in{transform:none;filter:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}.reveal.d4{transition-delay:.36s}

/* — tarjetas y superficies: lift suave, luz superior — */
.step,.tcard,.rec .img,.addon,.iday,.date-card,.depart,.summary{transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s}
.rec .fill span.blue{background:var(--grad-cool)}

/* — el precio y la preventa siguen siendo cálidos (acción) — */
.pricechips .pc.pre .a,.cal-end .cupos.low,.cal-date .mm,.book-price .bp-pre,.addon .plus{color:var(--accent)}
.iday .day{color:var(--teal-lite)}          /* etiqueta temporal = agua */

/* — pulido responsive — */
@media(max-width:980px){
  body::after{animation:none;opacity:.7}
  #home .section:has(.recs)::before,#home .section:has(.testi)::before{width:380px;height:380px}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(46px,13vw,90px)}
  .pricechips{gap:16px}.pricechips .pc .a{font-size:26px}
  .steps,.testi{gap:16px}
  .trip-hero h1{font-size:clamp(40px,11vw,72px)}
}
@media(prefers-reduced-motion:reduce){
  body::after{animation:none}
  .reveal{transform:none!important;filter:none!important}
}
