:root{
  /* Paleta do Manual da marca v1.0 (ago/2026): sete cores, uma so de acento.
     O laranja de versoes anteriores foi retirado para o verde lagoa voltar a
     ter funcao. Nao reintroduzir cor quente no sistema. */
  --abissal:#0C2A33;--abissal2:#0A222A;--mare:#0E5C70;--lagoa:#10A578;
  --agua:#8FD9C4;--areia:#E9E0CE;--espuma:#F5F1E8;
  --disp:'Bricolage Grotesque',sans-serif;--body:'Inter',sans-serif;
  --maxw:1180px;--r:20px;--rlg:26px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--espuma);color:var(--abissal);line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.02}
.sec{padding:104px 0}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:14px 28px;border-radius:999px;border:none;cursor:pointer;transition:transform .18s,background .2s,color .2s}
.btn-sun{background:var(--lagoa);color:var(--areia)}
.btn-sun:hover{background:var(--areia);color:var(--abissal);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--areia);border:1.5px solid var(--areia)}
.btn-ghost:hover{border-color:var(--areia);transform:translateY(-2px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mare)}
.eyebrow svg{width:20px;height:20px}
.sec-head{max-width:660px;margin-bottom:54px}
.sec-head h2{font-size:clamp(38px,5.4vw,62px);margin:14px 0 0;color:var(--abissal)}
.sec-head p{margin-top:16px;color:#5a6a6e;font-size:17px}
.dark{background:var(--abissal);color:var(--areia)}
.dark .sec-head h2{color:var(--areia)}
.dark .sec-head p{color:rgba(233,224,206,.68)}
.symbol-img{display:block}
.wa{width:18px;height:18px;flex-shrink:0}
.wdiv{line-height:0;font-size:0}
.wdiv svg{display:block;width:100%;height:64px}

/* NAV — só o símbolo */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s;padding:14px 0}
#nav.scrolled{background:var(--abissal2);box-shadow:0 6px 30px rgba(0,0,0,.3);padding:9px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between}
.nav-sym{height:34px;width:auto}
.nav-logo{height:24px;width:auto;display:block}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--areia)}
.nav-links a:hover{color:var(--lagoa)}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
.burger span{width:24px;height:2px;background:var(--areia);border-radius:2px}

/* HERO — centralizado, 2 linhas */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero .duo{position:absolute;inset:0;background:linear-gradient(140deg,var(--abissal),var(--mare))}
.hero .duo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;filter:grayscale(1) contrast(1.15);opacity:.5}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(10,34,42,.35) 0%,rgba(10,34,42,.82) 100%)}
.hero-in{position:relative;z-index:2;text-align:center;max-width:900px;padding:0 24px}
.hero .eyebrow{color:var(--areia);justify-content:center}
.hero h1{color:var(--areia);font-size:clamp(46px,7.4vw,100px);margin:20px 0 0;letter-spacing:-.03em}
.hero h1 .accent{color:var(--lagoa)}
/* Sem botao embaixo, a margem de 36px virava um vazio solto no fim do hero. */
.hero p{color:rgba(233,224,206,.84);font-size:clamp(16px,2vw,20px);max-width:560px;margin:22px auto 0}

/* TICKER */
.tkw{overflow:hidden;line-height:0;font-size:0}
.tkw-in{width:200%;animation:drift 22s linear infinite}
.tkw-in svg{width:100%;height:30px;display:block}
.tkw.rev .tkw-in{animation-direction:reverse}
@keyframes drift{to{transform:translateX(-50%)}}
.ticker{background:var(--lagoa);color:var(--areia);overflow:hidden;white-space:nowrap;padding:12px 0}
.t-track{display:inline-flex;animation:tick 30s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
.t-item{font-weight:800;font-family:var(--disp);font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;padding:0 32px;display:inline-flex;gap:28px;align-items:center}
.t-item i{font-style:normal;opacity:.55;font-size:10px}

/* MODALIDADES — grade arredondada estilo anexo 5 */
.mods{background:var(--areia)}
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(12,42,51,.12);border:1.5px solid rgba(12,42,51,.14);border-radius:var(--rlg);overflow:hidden}
.mod{background:var(--espuma);padding:38px 32px;transition:background .25s}
.mod:hover{background:#fff}
.mod .g{width:46px;height:46px;margin-bottom:18px}
.mod h3{font-size:23px;margin-bottom:6px}
.mod h3 .soon{font-size:10px;font-weight:800;color:var(--lagoa);letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;margin-left:8px}
.mod p{font-size:14px;color:#5a6a6e}

/* TRIPS — cards arredondados estilo anexo 6 */
.trips{background:var(--espuma)}
.trip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trip{position:relative;height:400px;border-radius:var(--rlg);overflow:hidden;background:linear-gradient(140deg,var(--abissal2),var(--mare));transition:transform .22s,box-shadow .22s}
.trip:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(12,42,51,.25)}
.trip::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,34,42,.94) 8%,rgba(10,34,42,.2) 55%,rgba(10,34,42,.05));z-index:1;pointer-events:none}
.trip-img{position:absolute;inset:0}
.trip-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;filter:grayscale(1) contrast(1.12);opacity:.55;transition:transform .5s}
.trip:hover .trip-img img{transform:scale(1.05)}
.trip-pill{position:absolute;top:14px;left:14px;z-index:2;background:var(--espuma);color:var(--abissal);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.trip-pill svg{width:15px;height:15px}
.trip-stamp{position:absolute;top:16px;right:16px;z-index:2;width:32px;height:32px;color:rgba(233,224,206,.85)}
.trip-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px}
.trip-body h3{font-size:24px;margin-bottom:6px;color:var(--areia)}
.trip-meta{display:flex;gap:10px;font-size:13.5px;color:rgba(233,224,206,.72);font-weight:500;align-items:center}
.trip-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--lagoa)}
.trip-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid rgba(233,224,206,.22)}
.trip-extra{font-size:13.5px;font-weight:700;color:var(--lagoa)}
.trip-go{font-size:13.5px;font-weight:700;color:var(--lagoa);text-decoration:none}
.trip:hover .trip-go{color:var(--areia)}

/* VIAGENS DA EXPLORE */
.viagens{background:var(--abissal)}
.vg-slider{position:relative}
.vg-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vg-track::-webkit-scrollbar{display:none}
.vg-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;height:400px;border-radius:var(--rlg);overflow:hidden;display:flex;align-items:flex-end;text-decoration:none}
.vg-bg{position:absolute;inset:0;background:linear-gradient(140deg,var(--abissal2),var(--mare))}
.vg-bg img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;filter:grayscale(1) contrast(1.13);opacity:.55}
.vg-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,34,42,.92) 6%,rgba(10,34,42,.22) 62%,rgba(10,34,42,.08));pointer-events:none}
.vg-in{position:relative;z-index:2;padding:34px 38px;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.vg-in h3{font-size:clamp(26px,3.2vw,40px);color:var(--areia);margin-top:12px}
.vg-days{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lagoa);margin-top:8px}
.vg-go{background:var(--lagoa);color:var(--abissal);font-weight:700;font-size:14px;padding:12px 24px;border-radius:999px;white-space:nowrap;transition:background .2s}
.vg-slide:hover .vg-go{background:var(--areia)}
.vg-duo{flex:0 0 100%;scroll-snap-align:start;display:flex;gap:18px}
.vg-half{position:relative;flex:1;height:400px;border-radius:var(--rlg);overflow:hidden;display:flex;align-items:flex-end;text-decoration:none}
.vg-half::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,34,42,.92) 8%,rgba(10,34,42,.25) 60%,rgba(10,34,42,.1));pointer-events:none}
.vg-half .vg-in{padding:28px 30px}
.vg-half h3{font-size:clamp(22px,2.4vw,30px)}
.vg-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:22px}
.vg-arr{background:none;border:1.5px solid rgba(233,224,206,.35);color:var(--areia);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:15px;transition:border-color .2s,color .2s}
.vg-arr:hover{border-color:var(--lagoa);color:var(--lagoa)}
.vg-dot{width:8px;height:8px;border-radius:50%;background:rgba(233,224,206,.28);border:none;cursor:pointer;padding:0;transition:background .2s}
.vg-dot.on{background:var(--lagoa)}

/* DEPOIMENTOS */
.depo{background:var(--areia)}
.depo-note{font-size:12.5px;color:#8a8072;margin:-38px 0 38px;max-width:620px}
.depo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:var(--espuma);border-radius:var(--rlg);padding:32px 28px}
.quote .q-trip{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoa);margin-bottom:16px}
.quote p{font-size:16px;margin-bottom:20px}
.quote .who{font-size:13px;font-weight:700;color:var(--abissal)}
.quote .where{font-size:12px;color:#8a8072}

/* CTA — só símbolo */
.cta{background:var(--abissal);text-align:center}
.cta .symbol-img{height:60px;width:auto;margin:0 auto 28px}
.cta h2{font-size:clamp(40px,6.6vw,86px);margin-bottom:20px;color:var(--areia)}
.cta h2 .accent{color:var(--lagoa)}
.cta p{color:rgba(233,224,206,.72);font-size:18px;max-width:480px;margin:0 auto 34px}

/* FOOTER — logo original */
footer{background:var(--abissal2);color:var(--areia);padding:64px 0 34px;border-top:1px solid rgba(233,224,206,.08)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(233,224,206,.1)}
.foot-brand .logo-h{height:27px;width:auto;margin-bottom:16px}
.foot-brand p{color:rgba(233,224,206,.55);font-size:14px;max-width:280px}
.foot-col h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lagoa);margin-bottom:16px}
.foot-col a{display:block;color:rgba(233,224,206,.72);font-size:14px;margin-bottom:10px}
.foot-col a:hover{color:var(--lagoa)}
.foot-bot{display:flex;justify-content:space-between;padding-top:24px;font-size:13px;color:rgba(233,224,206,.4);flex-wrap:wrap;gap:12px}

.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

/* ===== v6 · acessibilidade, âncoras, menu mobile, whatsapp flutuante ===== */
section[id],header[id]{scroll-margin-top:96px}
.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--lagoa);color:var(--abissal);padding:12px 22px;font-weight:700;border-radius:0 0 14px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:3px solid var(--lagoa);outline-offset:3px;border-radius:8px}
.burger span{transition:transform .25s,opacity .18s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:9997;background:var(--abissal);display:flex;flex-direction:column;justify-content:center;padding:0 28px;transform:translateY(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);visibility:hidden}
.mnav.open{transform:none;visibility:visible}
.mnav a{font-family:var(--disp);font-weight:800;font-size:clamp(30px,9vw,44px);line-height:1.24;letter-spacing:-.02em;color:var(--areia)}
.mnav a:active{color:var(--lagoa)}
.mnav .btn{align-self:flex-start;margin-top:28px;font-family:var(--body);font-size:15px}
.mnav-foot{position:absolute;left:28px;bottom:34px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,224,206,.5)}
body.locked{overflow:hidden}
.wafab{position:fixed;right:20px;bottom:20px;z-index:9996;width:56px;height:56px;border-radius:999px;background:var(--lagoa);color:var(--abissal);display:grid;place-items:center;box-shadow:0 12px 32px rgba(12,42,51,.38);opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;transition:opacity .3s,transform .3s,background .2s}
.wafab.show{opacity:1;transform:none;pointer-events:auto}
.wafab:hover{background:var(--areia)}
.wafab svg{width:27px;height:27px;fill:currentColor}
.foot-col span{display:block;font-size:14.5px;color:rgba(233,224,206,.58);margin-bottom:9px}
@media(min-width:641px){.mnav{display:none}}
@media(max-width:640px){.wafab{width:52px;height:52px;right:16px;bottom:16px}}
@media(max-width:940px){.mod-grid,.trip-grid,.depo-grid{grid-template-columns:1fr 1fr}.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.wrap{padding:0 20px}.nav-links{display:none}.burger{display:flex}.sec{padding:68px 0}.mod-grid,.trip-grid,.depo-grid,.foot-top{grid-template-columns:1fr}.vg-slide{height:340px}.trip{height:360px}.hero h1{font-size:clamp(40px,11vw,56px)}.nav-logo{height:19px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ===================== v7 ===================== */
:root{--agua:#8FD9C4}
#nav{transition:transform .38s cubic-bezier(.4,0,.2,1),background .3s,box-shadow .3s,padding .3s}
#nav.hide{transform:translateY(-104%)}
.nav-logo{height:24px}
#nav.scrolled .nav-logo{height:21px}
.foot-brand .logo-h{height:76px;width:auto;margin-bottom:22px}
.btn-sun{background:var(--lagoa);color:var(--areia)}
.btn-sun:hover{background:var(--mare);color:var(--areia);transform:translateY(-2px)}
.btn-ghost{color:var(--areia);border:1.5px solid rgba(233,224,206,.45)}
.btn-ghost:hover{background:rgba(233,224,206,.12);color:var(--areia);border-color:var(--areia)}
.vg-go{background:var(--lagoa);color:var(--abissal)}
.vg-slide:hover .vg-go{background:var(--mare);color:var(--areia)}
/* Fundo claro: surf, trekking e wingfoil em verde lagoa; yoga, kitesurf e
   cultura em mare. Decisao da Explore, ago/2026. */
.gc-prancha,.gc-duna,.gc-vela{color:var(--lagoa)}
.gc-sol,.gc-kite,.gc-lhama{color:var(--mare)}
/* Fundo escuro: todos em areia. Decisao da Explore, ago/2026. Diverge da
   pagina 5 do manual, que separava agua rasa, areia e lagoa por modalidade. */
.gd-prancha,.gd-sol,.gd-kite,.gd-duna,.gd-vela,.gd-lhama{color:var(--areia)}
.trip-go{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(233,224,206,.42);display:grid;place-items:center;color:var(--areia);font-size:17px;font-weight:600;line-height:1;transition:background .22s,border-color .22s,transform .22s}
.trip:hover .trip-go{background:var(--lagoa);border-color:var(--lagoa);color:var(--areia);transform:translateX(3px)}
.mod{transition:background .25s,transform .28s,box-shadow .28s}
.mod:hover{background:#fff;transform:scale(1.035);box-shadow:0 22px 46px rgba(12,42,51,.18);position:relative;z-index:3}
.trip{transition:transform .28s,box-shadow .28s}
.trip:hover{transform:translateY(-6px) scale(1.02)}
.vg-slide{transition:transform .3s,box-shadow .3s}
.vg-slide:hover{transform:scale(1.014);box-shadow:0 26px 52px rgba(10,34,42,.42)}
.quote{transition:transform .26s,box-shadow .26s}
.quote:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 20px 42px rgba(12,42,51,.14)}
.mf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.mf svg{width:34px;height:34px;margin-bottom:16px}
.mf h3{font-size:19px;color:var(--areia);margin-bottom:8px}
.mf p{font-size:14.5px;color:rgba(233,224,206,.68)}
/* ---------- pagina de trip ---------- */
.thero{position:relative;min-height:84vh;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(140deg,var(--abissal2),var(--mare))}
.thero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,34,42,.96) 14%,rgba(10,34,42,.35) 62%,rgba(10,34,42,.15))}
.back{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,224,206,.68);margin-bottom:24px}
.back:hover{color:var(--lagoa)}
.tpills{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tpill{background:var(--espuma);color:var(--abissal);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.tpill svg{width:15px;height:15px}
.tpill.own{background:transparent;color:var(--areia);border:1.5px solid rgba(233,224,206,.45)}
.thero h1{font-size:clamp(38px,6.6vw,78px);color:var(--areia);margin:18px 0 16px;max-width:15ch}
.tlead{color:rgba(233,224,206,.82);font-size:clamp(16px,2vw,19px);max-width:600px;margin-bottom:26px}
.tmeta{display:flex;flex-wrap:wrap;gap:8px 24px;color:rgba(233,224,206,.72);font-size:14.5px;margin-bottom:32px}
.tmeta b{color:var(--areia);font-weight:700}
.tacts{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.tprice .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,224,206,.6);display:block;margin-bottom:5px}
.tprice .v{font-family:var(--disp);font-weight:800;font-size:38px;color:var(--lagoa);line-height:1}
.lugar{background:var(--espuma)}
.lugar-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:58px;align-items:start}
.lugar-txt p{font-size:17px;color:#41525a;margin-bottom:18px}
.dest{border-left:2px solid var(--lagoa);padding-left:18px;margin-bottom:26px}
.dest h4{font-family:var(--disp);font-size:17px;margin-bottom:5px}
.dest p{font-size:14.5px;color:#5a6a6e}
.dias{background:var(--abissal)}
.dia{display:grid;grid-template-columns:96px 1fr;gap:26px;padding:26px 0;border-top:1px solid rgba(233,224,206,.16)}
.dia:last-child{border-bottom:1px solid rgba(233,224,206,.16)}
.dia .n{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--lagoa);line-height:1.1}
.dia h4{font-size:20px;color:var(--areia);margin-bottom:6px}
.dia p{font-size:15px;color:rgba(233,224,206,.66)}
.inc{background:var(--areia)}
.inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.inc h3{font-size:23px;margin-bottom:14px}
.inc ul{list-style:none}
.inc li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(12,42,51,.12);font-size:15.5px}
.inc li i{font-style:normal;font-weight:800;color:var(--lagoa)}
.inc .no li{color:#6e7a7e}
.inc .no li i{color:#a29684}
.invest{background:var(--espuma)}
.inv-card{background:var(--abissal);border-radius:var(--rlg);padding:46px;display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.inv-card .v{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5vw,56px);color:var(--lagoa);line-height:1}
.inv-card .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,224,206,.6);display:block;margin-bottom:6px}
.inv-card p{color:rgba(233,224,206,.7);font-size:14.5px;max-width:430px;margin-top:12px}
.outras{background:var(--abissal2)}
.outras .sec-head h2{color:var(--areia)}
.tbar{position:fixed;left:0;right:0;bottom:0;z-index:9995;background:var(--abissal2);border-top:1px solid rgba(233,224,206,.18);padding:11px 16px;display:none;align-items:center;justify-content:space-between;gap:12px}
.tbar .v{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--lagoa);line-height:1.1}
.tbar small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,224,206,.55)}
/* ---------- blog ---------- */
.bhero{background:var(--abissal);padding:150px 0 72px}
.bhero h1{font-size:clamp(42px,6.6vw,80px);color:var(--areia);margin-top:14px}
.bhero p{color:rgba(233,224,206,.7);margin-top:16px;max-width:540px;font-size:17px}
.blog{background:var(--espuma)}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.f{background:none;border:1.5px solid rgba(12,42,51,.18);color:var(--abissal);font-family:var(--body);font-weight:600;font-size:13px;padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.f:hover{border-color:var(--lagoa)}
.f.on{background:var(--lagoa);border-color:var(--lagoa);color:var(--areia)}
.feat{display:grid;grid-template-columns:1.15fr 1fr;border-radius:var(--rlg);overflow:hidden;margin-bottom:58px;background:var(--abissal);transition:transform .28s,box-shadow .28s}
.feat:hover{transform:scale(1.012);box-shadow:0 26px 54px rgba(12,42,51,.26)}
.feat-img{position:relative;min-height:340px;background:linear-gradient(140deg,var(--abissal2),var(--mare))}
.feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;filter:grayscale(1) contrast(1.12);opacity:.6}
.feat-in{padding:48px}
.feat h2{font-size:clamp(26px,3.2vw,38px);color:var(--areia);margin:16px 0 14px}
.feat p{color:rgba(233,224,206,.7);font-size:16px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{background:var(--espuma);border:1.5px solid rgba(12,42,51,.12);border-radius:var(--rlg);overflow:hidden;display:flex;flex-direction:column;transition:transform .26s,box-shadow .26s}
.pcard:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 22px 46px rgba(12,42,51,.16)}
.pcard-img{height:196px;position:relative;background:linear-gradient(140deg,var(--abissal2),var(--mare));overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;filter:grayscale(1) contrast(1.12);opacity:.62;transition:transform .5s}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.pcat{position:absolute;top:12px;left:12px;z-index:2;background:var(--espuma);color:var(--abissal);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.pcard-in{padding:24px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:20px;margin-bottom:10px;line-height:1.15}
.pcard p{font-size:14.5px;color:#5a6a6e;flex:1}
.pmeta{display:flex;gap:9px;align-items:center;font-size:12.5px;color:#8a8072;margin-top:18px;padding-top:14px;border-top:1px solid rgba(12,42,51,.1)}
.pmeta .dot{width:4px;height:4px;border-radius:50%;background:var(--lagoa)}
.art{background:var(--espuma);padding:64px 0 88px}
.art-wrap{max-width:730px;margin:0 auto;padding:0 32px}
.art-wrap h2{font-size:30px;margin:46px 0 16px}
.art-wrap p{font-size:17.5px;color:#3b4d55;margin-bottom:20px;line-height:1.76}
.art-wrap ul{margin:0 0 24px 20px;color:#3b4d55;font-size:17px}
.art-wrap li{margin-bottom:9px}
.art-q{border-left:3px solid var(--lagoa);padding:8px 0 8px 24px;margin:34px 0;font-family:var(--disp);font-weight:700;font-size:23px;line-height:1.36}
.art-auth{display:flex;gap:14px;align-items:center;margin-top:50px;padding-top:26px;border-top:1.5px solid rgba(12,42,51,.12);font-size:14px;color:#5a6a6e}
.art-auth b{display:block;color:var(--abissal);font-size:15px}
@media(max-width:940px){.mf-grid{grid-template-columns:1fr 1fr;gap:30px}.lugar-grid{grid-template-columns:1fr;gap:36px}.inc-grid{grid-template-columns:1fr;gap:32px}.feat{grid-template-columns:1fr}.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.mf-grid{grid-template-columns:1fr}.post-grid{grid-template-columns:1fr}.feat-in{padding:30px}.dia{grid-template-columns:62px 1fr;gap:16px}.tbar{display:flex}.wafab{bottom:84px}.thero-in{padding:120px 0 46px}.inv-card{padding:32px}}


/* GRANULADO — camada de grão a 40% sobre todas as fotos.
   Fica acima da imagem (z-index 1) e abaixo de pills, selos e texto (z-index 2). */
.hero .duo::before,.trip-img::before,.vg-bg::before,.feat-img::before,.pcard-img::before,.thero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media(prefers-reduced-motion:reduce){.hero .duo::before,.trip-img::before,.vg-bg::before,.feat-img::before,.pcard-img::before,.thero::before{opacity:.4}}

/* lista de acomodacoes no card de investimento */
.inv-card .acom{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;max-width:430px}
.inv-card .acom li{display:flex;justify-content:space-between;gap:18px;padding-bottom:8px;border-bottom:1px solid rgba(233,224,206,.16);color:rgba(233,224,206,.8);font-size:15px}
.inv-card .acom li:last-child{border-bottom:0;padding-bottom:0}
.inv-card .acom b{font-family:var(--disp);color:var(--lagoa);white-space:nowrap}

/* selo de trip esgotada */
.trip-out{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(10,34,42,.55);
  font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.12em;text-transform:uppercase;color:var(--areia)}
/* Esgotado nao e acento: usa areia, nunca o verde nem cor quente.
   Manual, pagina 8: mais de um acento de cor na mesma peca e erro. */
.tpill-out{background:transparent;border:1.5px solid rgba(233,224,206,.5);color:rgba(233,224,206,.8)}
.trips-mais{margin-top:34px;display:flex;justify-content:center}

/* ============================================================
   FOTOGRAFIA · tratamento reduzido
   Antes: grayscale(1) + mix-blend-mode:screen sobre gradiente escuro
   + opacity .5 a .62. Somadas, as tres camadas apagavam quase toda a foto.
   Agora: dessaturacao leve, blend normal e opacity alta. A legibilidade do
   texto passa a vir de scrims locais, so onde ha texto, em vez de apagar a
   imagem inteira. O gradiente da marca continua atras, aparecendo nas bordas
   e enquanto a foto carrega.
   ============================================================ */
.hero .duo img,.trip-img img,.vg-bg img,.thero-img img,.feat-img img,.pcard-img img{
  mix-blend-mode:normal;
  filter:grayscale(.12) contrast(1.05) saturate(1.06);
}
.hero .duo img{opacity:.96}
.trip-img img{opacity:.94}
.vg-bg img{opacity:.94}
.feat-img img{opacity:.96}
.pcard-img img{opacity:.96}

/* Scrims: o v7 ja tem um por elemento com texto sobreposto, em .trip::after,
   .vg-slide::after e .thero::after. Nao adicionar outro por cima, senao o
   escurecimento dobra e a foto volta a sumir. Nos cards do blog nao ha texto
   sobre a foto (.feat-in e coluna separada, .pcat tem fundo proprio), entao
   la a foto fica limpa.
   O hero e a excecao: o radial proprio foi reforcado no centro porque a foto
   agora entra em forca total sob o titulo. */
.hero::after{background:radial-gradient(ellipse at center,rgba(10,34,42,.5) 0%,rgba(10,34,42,.86) 100%)}

/* ============================================================
   MODALIDADES · cards soltos, no mesmo padrao dos depoimentos
   Antes: gap de 1px com fundo escuro formando fio, tudo dentro de uma
   borda unica com overflow hidden, o que fazia os seis lerem como
   uma tabela so. Agora cada card e uma peca, como em .depo-grid.
   ============================================================ */
.mod-grid{gap:20px;background:transparent;border:0;border-radius:0;overflow:visible}
.mod{border-radius:var(--rlg);border:1.5px solid rgba(12,42,51,.12);padding:32px 28px}
.mod:hover{background:var(--espuma);transform:translateY(-4px);box-shadow:0 16px 34px rgba(12,42,51,.10)}

/* Logo do rodape 20% menor: 76px -> 61px de altura.
   A assinatura completa e 338x150, entao 61px de altura da 137px de largura,
   acima do minimo digital de 120px que o manual fixa na pagina 3. */
.foot-brand .logo-h{height:61px}

/* ============================================================
   VIDEO DE FUNDO DO HERO
   Cobre a area toda mantendo 16:9, como object-fit:cover faria numa imagem.
   A foto embaixo pinta o LCP e serve de fallback.
   ============================================================ */
.hero-video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;
  border:0;pointer-events:none;z-index:1;
}
.hero .duo img{position:absolute;inset:0}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}

/* ============================================================
   BOTAO SECUNDARIO EM FUNDO CLARO
   .btn-ghost nasceu para fundo escuro (texto e borda em areia). Nas secoes
   claras ele ficava invisivel sobre a espuma.
   ============================================================ */
/* Fantasma em secao clara: a borda escurece para nao sumir na espuma, mas
   o preenchimento vem junto para o texto continuar em areia. */
.sec:not(.dark) .btn-ghost{background:var(--abissal);color:var(--areia);border-color:var(--abissal)}
.sec:not(.dark) .btn-ghost:hover{background:var(--mare);color:var(--areia);border-color:var(--mare)}

/* estado vazio do filtro de trips */
.sem-resultado{margin-top:34px;text-align:center;color:#5a6a6e;font-size:16px}
.sem-resultado a{color:var(--lagoa);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bhero .gd-onda{width:20px;height:20px;color:var(--lagoa)}

/* O filtro esconde cards com o atributo [hidden]. Regra de UA tem especificidade
   zero, entao qualquer display no proprio card (.pcard e display:flex) a vence.
   Sem este !important, filtrar o blog nao esconde nada. */
[hidden]{display:none!important}

/* ============================================================
   HERO DE TRIP · foto contida, sem banda dura embaixo
   Antes: 84vh de foto com scrim que ia de 96% de opacidade ate 14% da
   altura, criando um corte visivel no meio da imagem. Agora a altura e
   menor, o degrade sobe mais devagar e ha um veu no topo so para o nav.
   ============================================================ */
.thero{min-height:auto;height:clamp(460px,72vh,720px)}
.thero::after{
  background:
    linear-gradient(to bottom,rgba(10,34,42,.72) 0%,rgba(10,34,42,.18) 22%,transparent 38%),
    linear-gradient(to top,rgba(10,34,42,.93) 0%,rgba(10,34,42,.78) 22%,rgba(10,34,42,.42) 48%,rgba(10,34,42,.1) 72%,transparent 100%);
}
.thero-post{height:clamp(400px,62vh,600px)}
@media(max-width:640px){.thero-img{height:clamp(240px,42vh,380px)}}

/* titulo em dois niveis: linha em cima, destino embaixo */
.thero-h1 .tt-linha,.trip .tt-linha{
  display:block;font-family:var(--body);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lagoa);
}
.thero-h1 .tt-linha{font-size:clamp(12px,1.5vw,15px);margin-bottom:8px}
.thero-h1 .tt-destino{display:block}
.thero-com{color:rgba(233,224,206,.82);font-size:16px;margin:-6px 0 14px}
.thero-com strong{color:var(--areia)}

/* ============================================================
   PROPRIA x PARCEIRA
   O selo nao e acento de cor: usa areia, para o verde seguir sendo o
   unico chamado para acao na peca (manual, p. 6 e 8).
   ============================================================ */
.selo-parceira{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(10,34,42,.72);color:var(--areia);border:1px solid rgba(233,224,206,.45);
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;backdrop-filter:blur(6px);
}
.tpill-parceira{background:transparent;border:1.5px solid rgba(233,224,206,.55);color:var(--areia)}
.tpill-linha{background:var(--lagoa);color:var(--areia)}
.inv-parceira{margin-top:14px;font-size:14px;color:rgba(233,224,206,.62);max-width:430px}

/* card de trip: titulo em dois niveis, preco e quem leva */
.trip .tt{margin-bottom:6px}
.trip .tt-linha{font-size:11px;margin-bottom:3px}
.trip .tt-destino{display:block;font-size:24px;color:var(--areia);line-height:1.05}
.trip-com{font-size:13px;color:rgba(233,224,206,.72);margin-top:2px}
.trip-com-quiet{color:rgba(233,224,206,.5);font-size:12.5px;margin-top:8px}
.trip-preco{font-size:15px;font-weight:800;font-family:var(--disp);color:var(--lagoa)}

/* ============================================================
   QUEM GUIA · usada na pagina de trip e na /equipe
   ============================================================ */
.quemguia{background:var(--espuma)}
.guia-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.guia{background:var(--areia);border-radius:var(--rlg);overflow:hidden;display:flex;flex-direction:column;
  border:1.5px solid rgba(12,42,51,.1);transition:transform .26s,box-shadow .26s}
.guia:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(12,42,51,.14)}
.guia-foto{position:relative;aspect-ratio:4/3;background:linear-gradient(140deg,var(--abissal2),var(--mare));overflow:hidden}
.guia-foto img{width:100%;height:100%;object-fit:cover}
.guia-in{padding:22px;display:flex;flex-direction:column;flex:1}
.guia-in h3{font-size:20px;margin-bottom:4px}
.guia-papel{font-size:14px;color:#5a6a6e}
.guia-ig{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--lagoa)}
.guia-ig:hover{text-decoration:underline}
.guia-trips{margin-top:14px;padding-top:12px;border-top:1px solid rgba(12,42,51,.12);display:flex;flex-direction:column;gap:5px}
.guia-trips a{font-size:13.5px;color:var(--mare);font-weight:600}
.guia-trips a:hover{color:var(--lagoa)}
.equipe{background:var(--espuma)}

/* ============================================================
   FAQ · <details> nativo, sem JS
   ============================================================ */
.faq{background:var(--areia)}
.faq-lista{max-width:820px;display:grid;gap:12px}
.faq-item{background:var(--espuma);border:1.5px solid rgba(12,42,51,.1);border-radius:var(--r);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;font-size:16.5px;
  display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--disp);font-size:24px;color:var(--lagoa);line-height:1;flex-shrink:0}
.faq-item[open] summary::after{content:"–"}
.faq-item[open]{border-color:rgba(16,165,120,.4)}
.faq-item p{padding:0 24px 22px;color:#4a5a60;font-size:15.5px;max-width:66ch}
.faq-mais{margin-top:26px;font-size:15px;color:#5a6a6e}
.faq-mais a{color:var(--lagoa);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.crumb{margin-bottom:18px}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0;margin:0}
.crumb li{font-size:12.5px;color:rgba(233,224,206,.6)}
.crumb li+li::before{content:"›";margin-right:8px;opacity:.5}
.crumb a{color:rgba(233,224,206,.82)}
.crumb a:hover{color:var(--lagoa);text-decoration:underline}
.crumb li[aria-current]{color:var(--areia);font-weight:600}

/* ============================================================
   PAGINAS INSTITUCIONAIS
   ============================================================ */
.legal{background:var(--espuma)}
.legal-wrap{max-width:780px}
.legal-sec{margin-bottom:36px}
.legal-sec h2{font-size:23px;margin-bottom:10px;color:var(--abissal)}
.legal-sec p{color:#41525a;font-size:16.5px;line-height:1.75}

.contato{background:var(--espuma)}
.canal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.canal{background:var(--areia);border:1.5px solid rgba(12,42,51,.1);border-radius:var(--rlg);padding:34px 28px;
  display:flex;flex-direction:column;transition:transform .26s,box-shadow .26s}
.canal:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(12,42,51,.14)}
.canal-i{width:30px;height:30px;color:var(--lagoa);margin-bottom:16px}
.canal h3{font-size:21px;margin-bottom:5px}
.canal p{color:#5a6a6e;font-size:15px;flex:1}
.canal-go{margin-top:18px;font-weight:700;font-size:14px;color:var(--lagoa)}
.contato-info{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;padding-top:32px;
  border-top:1.5px solid rgba(12,42,51,.12)}
.contato-info h4{font-family:var(--disp);font-weight:800;font-size:15px;margin-bottom:6px;color:var(--abissal)}
.contato-info p{font-size:14.5px;color:#5a6a6e}

/* contagem e filtro de operacao em /trips */
.contagem{margin:0 0 22px;font-size:14px;font-weight:600;color:#5a6a6e}
.filtros-op{margin-top:-6px}
.f2{background:transparent;border:1.5px solid rgba(12,42,51,.2);color:var(--abissal);
  font-family:var(--body);font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:999px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.f2:hover{border-color:var(--lagoa)}
.f2.on{background:var(--abissal);border-color:var(--abissal);color:var(--areia)}

@media(max-width:940px){.guia-grid,.canal-grid,.contato-info{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.guia-grid,.canal-grid,.contato-info{grid-template-columns:1fr}}

/* ============================================================
   MOBILE
   ============================================================ */
/* Nada pode vazar horizontalmente: marquee e grade larga sao o risco. */
html,body{overflow-x:hidden;max-width:100%}
/* iOS: barra de preco e FAB respeitam a home indicator */
.tbar{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.wafab{bottom:calc(24px + env(safe-area-inset-bottom))}
@media(max-width:640px){.wafab{bottom:calc(84px + env(safe-area-inset-bottom))}}
.mnav{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
/* Alvo de toque de 44px, minimo da diretriz de acessibilidade movel */
@media(pointer:coarse){
  .nav-links a,.mnav a,.f,.f2,.vg-dot,.vg-arr,.trip-go,.crumb a,.foot-col a,.guia-trips a{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .vg-dot{min-width:44px;justify-content:center;background-clip:content-box;padding:19px 0}
  .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
}
/* Texto nao encolhe na rotacao do iPhone */
body{-webkit-text-size-adjust:100%}
/* Palavra longa em titulo nao estoura a caixa */
h1,h2,h3,.tt-destino{overflow-wrap:break-word}
/* Grade de guias e canais em telas medias */
@media(max-width:760px){.filtros{gap:8px}.f,.f2{font-size:13px;padding:8px 14px}}

/* ============================================================
   RODAPE · linha legal
   ============================================================ */
.foot-local{margin-top:10px;font-size:12.5px;color:rgba(233,224,206,.45)}
.foot-legal{display:flex;gap:18px}
.foot-legal a{text-decoration:underline;text-underline-offset:3px}
.foot-legal a:hover{color:var(--lagoa)}
@media(max-width:640px){.foot-bot{flex-direction:column;gap:12px;text-align:center}.foot-legal{justify-content:center}}

/* impressao: o essencial legivel, sem foto nem navegacao */
@media print{
  nav,.mnav,.wafab,.tbar,.wdiv,.tkw,.ticker,.hero-video,.filtros,.trips-mais{display:none!important}
  body{background:#fff;color:#000}
  .thero{height:auto;min-height:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}

/* ============================================================
   HEADER DE TRIP E DE POST · v2
   Imagem de largura inteira em cima, informacoes em bloco solido embaixo.
   Resolve dois problemas de uma vez: nenhum texto fica sobre foto, e o
   seletor `.thero>img` (que parou de casar quando a imagem passou a vir
   dentro de <picture>) deixa de importar.
   ============================================================ */
.thero{
  position:relative;display:block;height:auto;min-height:0;
  overflow:hidden;background:linear-gradient(140deg,var(--abissal2),var(--mare));
  padding-top:0;
}
.thero::after{content:none}
.thero-img{position:relative;width:100%;height:clamp(300px,48vh,560px);overflow:hidden}
.thero-img img,.thero-img picture{display:block;width:100%;height:100%}
.thero-img img{
  object-fit:cover;object-position:center 45%;
  mix-blend-mode:normal;filter:grayscale(.12) contrast(1.05) saturate(1.06);opacity:.96;
  position:static;
}
/* veu curto no topo, so para o nav transparente ter contraste */
.thero-img::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,34,42,.66) 0%,rgba(10,34,42,.16) 26%,transparent 46%);
}
.thero-post .thero-img{height:clamp(280px,42vh,480px)}

.thero-info{background:var(--abissal);color:var(--areia);padding:38px 0 52px}
.thero-info .crumb{margin-bottom:20px}
.thero-info .tpills{margin-bottom:18px}
.thero-info .thero-h1{font-size:clamp(36px,5.6vw,68px);color:var(--areia);margin:0 0 16px;max-width:18ch}
.thero-info .tlead{color:rgba(233,224,206,.8);font-size:clamp(16px,1.9vw,19px);max-width:60ch;margin-bottom:22px}
.thero-info .tmeta{color:rgba(233,224,206,.62)}
.thero-info .tacts{margin-top:26px}
.thero-com{color:rgba(233,224,206,.8);font-size:16px;margin:-6px 0 16px}
.thero-com strong{color:var(--lagoa)}
@media(max-width:640px){.thero-info{padding:28px 0 40px}}

/* pill do selo, agora so na pagina da trip */
.tpill-parceira{background:transparent;border:1.5px solid rgba(233,224,206,.5);color:rgba(233,224,206,.9)}

/* ============================================================
   FAQ centralizado
   ============================================================ */
.faq .sec-head{margin-left:auto;margin-right:auto;text-align:center}
.faq .sec-head .eyebrow{justify-content:center}
.faq .faq-lista{margin-left:auto;margin-right:auto}
.faq .faq-mais{text-align:center}

/* Assinatura do rodape agora e a marca horizontal (logo2 aparada, 395x52).
   Largura fixa em vez de altura: o aspecto mudou de 2.3:1 para 7.6:1, e
   travar pela altura estouraria a coluna. */
.foot-brand .logo-h{height:auto;width:min(250px,100%);margin-bottom:20px}
@media(max-width:640px){.foot-brand .logo-h{width:min(210px,70%)}}

/* Cartoes de canal: so o WhatsApp tem icone, que e a marca do app e nao um
   glifo da Explore. Instagram e e-mail ficam sem, porque reaproveitar duna
   ou onda para eles quebra o mapa do manual (regra 5). O espaco reservado
   mantem os tres cartoes alinhados. */
.canal h3{margin-top:0}
.canal-i+h3{margin-top:0}
.canal:not(:has(.canal-i)) h3{margin-top:46px}
@supports not selector(:has(*)){.canal h3{margin-top:0}}

/* ============================================================
   CONTRASTE · verde lagoa em fundo claro
   Lagoa sobre areia da 2.40:1 e sobre espuma 2.79:1. Os dois reprovam no
   WCAG AA, que pede 4.5:1 para texto normal. Em fundo ESCURO o lagoa passa
   (4.79:1) e segue sendo o acento, como manda o manual.
   Em fundo claro, o texto passa a usar mare (#0E5C70), que e da mesma
   paleta e da 5.75:1 sobre areia e 6.69:1 sobre espuma. O lagoa continua
   nos fundos de botao, bordas e pontos, onde nao carrega leitura.
   ============================================================ */
.faq-mais a,.guia-ig,.canal-go,.sem-resultado a,.legal-sec a,.contato-info a{color:var(--mare)}
.faq-item summary::after{color:var(--mare)}
.inc li i{color:var(--mare)}
.mod h3 .soon{color:var(--mare)}
.dest h4{color:var(--abissal)}
/* em fundo escuro nada muda: la o lagoa tem contraste de sobra */
.dark .faq-mais a,.dark .guia-ig,.outras .trip-preco{color:var(--lagoa)}

/* ============================================================
   BOTAO PRINCIPAL · texto em areia
   Decisao da Explore em ago/2026, alinhada com a pagina 8 do manual:
   todo texto de botao sai em areia. Sobre o verde lagoa isso da 2.40:1 e
   o WCAG AA pede 4.5:1, entao o texto ganha peso 700 e o fundo escurece
   um passo no hover e no foco, onde a leitura importa mais. Se um dia
   quiser passar no AA sem mudar a cor do texto, o caminho e trocar o
   fundo do botao de lagoa para mare: areia sobre mare da 5.75:1.
   ============================================================ */
.btn-sun{background:var(--lagoa);color:var(--areia);font-weight:700}
.btn-sun:hover{background:var(--mare);color:var(--areia);transform:translateY(-2px)}
.btn-sun:focus-visible{outline:3px solid var(--areia);outline-offset:3px}
/* Botao dentro de slide e de cartao segue a mesma regra. */
.vg-go,.vg-slide:hover .vg-go{color:var(--areia)}

/* Defesa: o cabecalho e o unico <nav> posicionado. Qualquer outro <nav> da
   pagina (breadcrumb, por exemplo) segue no fluxo normal. Sem isto, o
   seletor de elemento `nav` do v7 jogava o breadcrumb para o topo da tela. */
nav:not(#nav){position:static;z-index:auto;padding:0;transform:none}

/* ============================================================
   PAGINA DE TRIP · faixa de fatos rapidos
   Responde onde, quando, quanto tempo, que nivel e que grupo antes de
   qualquer rolagem. Os dados ja existiam soltos no .tmeta.
   ============================================================ */
.fatos{background:var(--abissal2);border-top:1px solid rgba(233,224,206,.1);padding:26px 0}
.fatos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;margin:0}
.fatos-grid>div{min-width:0}
.fatos dt{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lagoa);margin-bottom:5px}
.fatos dd{margin:0;font-size:15.5px;font-weight:600;color:var(--areia);line-height:1.35}
@media(max-width:640px){.fatos{padding:22px 0}.fatos-grid{grid-template-columns:1fr 1fr;gap:18px}}

/* etiqueta de urgencia: pre-venda, early bird, ultimas vagas */
.tpill-badge{background:var(--areia);color:var(--abissal);border:0}

/* ============================================================
   COMO RESERVAR · tira o atrito entre querer e pagar
   ============================================================ */
.reserva-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.reserva{background:var(--areia);border:1.5px solid rgba(12,42,51,.1);border-radius:var(--rlg);padding:28px 24px}
.reserva-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--abissal);color:var(--areia);font-family:var(--disp);font-weight:800;font-size:15px;margin-bottom:14px}
.reserva h4{font-family:var(--disp);font-weight:800;font-size:18px;margin-bottom:7px;color:var(--abissal)}
.reserva p{font-size:14.5px;color:#5a6a6e;line-height:1.6}
.reserva-nota{margin-top:26px;font-size:14px;color:#5a6a6e;max-width:70ch}
.reserva-nota a{color:var(--mare);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:940px){.reserva-grid{grid-template-columns:1fr}}

/* ============================================================
   CATALOGO SO DE PARCEIROS
   Nao ha mais trip propria, entao nao ha carrossel de viagens
   proprias nem selo de operacao no card. O que o card precisa dizer
   e quem opera e quanto custa.
   ============================================================ */
.trip-com{font-size:13px;color:rgba(233,224,206,.72);margin-top:2px}

/* ---- cartao Em breve: sem preco, sem vaga, sem contagem ---- */
.breve{background:var(--areia)}
.breve-bloco{margin-top:56px;padding-top:40px;border-top:1.5px solid rgba(12,42,51,.12)}
.breve-titulo{font-family:var(--disp);font-weight:800;font-size:24px;color:var(--abissal);margin-bottom:6px}
.breve-sub{font-size:15px;color:#5a6a6e;margin-bottom:26px;max-width:60ch}
.breve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trip-breve{height:300px;opacity:.9}
.trip-breve:hover{opacity:1}
.trip-breve .tt-destino{font-size:20px}
.selo-breve{position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(10,34,42,.72);color:var(--areia);border:1px solid rgba(233,224,206,.45);
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;backdrop-filter:blur(6px)}
.trip-espera{font-size:13px;font-weight:700;color:var(--lagoa)}
.trip-breve:hover .trip-espera{color:var(--areia)}
@media(max-width:940px){.breve-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.breve-grid{grid-template-columns:1fr}}

/* ---- bloco de aviso na pagina da trip ---- */
.aviso-sec{background:var(--espuma);padding-top:56px;padding-bottom:0}
.aviso{background:var(--areia);border-left:4px solid var(--lagoa);border-radius:var(--r);padding:26px 28px;max-width:820px}
.aviso h3{font-family:var(--disp);font-weight:800;font-size:19px;margin-bottom:8px;color:var(--abissal)}
.aviso p{font-size:15.5px;color:#41525a;line-height:1.7}

/* ---- cartao do operador ---- */
.operador-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.operador-card{background:var(--areia);border:1.5px solid rgba(12,42,51,.12);border-radius:var(--rlg);
  padding:30px;display:flex;justify-content:space-between;align-items:flex-start;gap:26px;flex-wrap:wrap}
.operador-card h3{font-size:22px;margin-bottom:6px;color:var(--abissal)}
.operador-nota{font-size:14.5px;color:#5a6a6e;max-width:52ch}
.operador-reg{font-size:12.5px;color:#8a8072;margin-top:6px;letter-spacing:.04em}
.operador-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.operador-links a{font-size:13.5px;font-weight:700;color:var(--mare)}
.operador-links a:hover{text-decoration:underline;text-underline-offset:3px}
.quemguia .operador-card{max-width:820px}
@media(max-width:940px){.operador-grid{grid-template-columns:1fr}}

/* ---- logistica, programa, levar e observacoes ---- */
.logistica{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;padding-top:32px;
  border-top:1.5px solid rgba(12,42,51,.12)}
.logistica h4,.levar h4{font-family:var(--disp);font-weight:800;font-size:15px;margin-bottom:7px;color:var(--abissal)}
.logistica p,.levar p{font-size:14.5px;color:#5a6a6e;line-height:1.7}
.levar{margin-top:28px}
.programa{background:var(--espuma)}
.programa-lista{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;max-width:920px}
.programa-lista li{position:relative;padding-left:22px;font-size:15.5px;color:#41525a;line-height:1.6}
.programa-lista li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--lagoa)}
.paraquem{background:var(--areia)}
.obs{margin-top:30px;max-width:820px;background:var(--areia);border:1.5px solid rgba(12,42,51,.12);border-radius:var(--r)}
.obs summary{cursor:pointer;list-style:none;padding:16px 22px;font-weight:700;font-size:15px;color:var(--abissal)}
.obs summary::-webkit-details-marker{display:none}
.obs summary::after{content:"+";float:right;font-family:var(--disp);font-size:20px;color:var(--mare)}
.obs[open] summary::after{content:"–"}
.obs ul{margin:0;padding:0 22px 20px 42px;color:#5a6a6e;font-size:14.5px}
.obs li{margin-bottom:8px;line-height:1.6}
.falta{margin-bottom:22px;padding:16px 20px;background:var(--areia);border-left:4px solid var(--mare);
  border-radius:var(--r);font-size:15px;color:#41525a;max-width:70ch}
@media(max-width:940px){.logistica,.programa-lista{grid-template-columns:1fr}}

/* Nota do slide "em breve": diz se e organizacao propria em estudo ou de
   parceiro, sem prometer o que ainda nao tem data. */
.vg-nota{margin-top:8px;font-size:13.5px;color:rgba(233,224,206,.62);max-width:44ch}

/* ============================================================
   CARD DE TRIP · v3
   Estrutura pedida:
     titulo
     local | data
     ────────────
     preço
     com <responsável>
   O local vem do campo curto (localCurto), porque o completo chega a ter
   seis cidades e quebrava em tres linhas por cima da foto.
   ============================================================ */
.trip-body{display:flex;flex-direction:column}
.trip .tt{margin-bottom:7px}
.trip .tt-destino{display:block;font-size:23px;color:var(--areia);line-height:1.08}
.trip-linha{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:13.5px;color:rgba(233,224,206,.78);font-weight:500;margin:0;
}
.trip-linha i{font-style:normal;color:rgba(233,224,206,.35);font-weight:300}
.trip-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(233,224,206,.22);
}
.trip-foot-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.trip-preco{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--lagoa);line-height:1.1}
.trip-com{font-size:12.5px;color:rgba(233,224,206,.6);margin:0}
.trip-go{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(233,224,206,.4);
  color:var(--areia);font-size:15px;transition:background .2s,border-color .2s,color .2s;
}
.trip:hover .trip-go{background:var(--lagoa);border-color:var(--lagoa);color:var(--abissal)}
/* o scrim precisa cobrir mais, porque o bloco de texto cresceu */
.trip::after{background:linear-gradient(to top,rgba(10,34,42,.96) 12%,rgba(10,34,42,.72) 38%,rgba(10,34,42,.18) 66%,rgba(10,34,42,.04))}

/* ============================================================
   SLIDE EM BREVE · sticker da modalidade, como nos cards
   ============================================================ */
.vg-pill{
  position:absolute;top:18px;left:18px;z-index:2;
  background:var(--espuma);color:var(--abissal);
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;
}
.vg-pill svg{width:15px;height:15px}
.vg-stamp{position:absolute;top:20px;right:20px;z-index:2;width:38px;height:38px;color:rgba(233,224,206,.85)}
@media(max-width:640px){.vg-pill{top:14px;left:14px}.vg-stamp{top:16px;right:16px;width:30px;height:30px}}

/* Rodape: o link "Ver todas" fecha a coluna de modalidades, entao ganha
   respiro e o verde de acento (contraste 4.79 sobre abissal). */
.foot-todas{margin-top:10px;color:var(--lagoa);font-weight:700}
.foot-todas:hover{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   COMO FUNCIONA (/equipe)
   ============================================================ */
.comofunciona{background:var(--espuma)}
.passo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.passo{background:var(--areia);border:1.5px solid rgba(12,42,51,.12);border-radius:var(--rlg);padding:30px 26px}
.passo-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--abissal);color:var(--areia);font-family:var(--disp);font-weight:800;font-size:16px;margin-bottom:16px}
.passo h4{font-family:var(--disp);font-weight:800;font-size:20px;margin-bottom:8px;color:var(--abissal)}
.passo p{font-size:14.5px;color:#5a6a6e;line-height:1.65}

/* viagens proprias, em preparacao. Nao sao oferta: nao tem preco nem CTA
   de compra, so lista de espera. */
.proprias{background:var(--abissal)}
.propria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.propria{background:rgba(233,224,206,.06);border:1.5px solid rgba(233,224,206,.16);border-radius:var(--rlg);padding:30px 26px}
.propria svg{width:40px;height:40px;margin-bottom:16px}
.propria h3{font-size:21px;color:var(--areia);margin-bottom:6px}
.propria p{font-size:14px;color:rgba(233,224,206,.6);line-height:1.6}
.propria-tag{display:inline-block;margin-top:14px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lagoa)}
.propria-cta{margin-top:44px;padding-top:32px;border-top:1px solid rgba(233,224,206,.16);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.propria-cta p{color:rgba(233,224,206,.75);font-size:17px}
.guia-breve{font-size:13.5px;color:#8a8072;font-style:italic}
@media(max-width:940px){.passo-grid,.propria-grid{grid-template-columns:1fr}}

/* ============================================================
   MENU MOBILE · o X precisa ficar acima do overlay
   O burger ja vira X (.burger.on), mas #nav tem z-index 100 e .mnav tem
   9997: com o menu aberto o X ficava atras do overlay, invisivel e sem
   clique. No celular so dava para fechar tocando num link.
   Com o menu aberto, a nav sobe acima do overlay e fica so o logo e o X:
   o "Quero ir" sai, porque o proprio menu ja tem um.
   ============================================================ */
body.locked #nav{z-index:9998;background:transparent;box-shadow:none}
body.locked #nav .btn-sun{display:none}
body.locked #nav .nav-logo{opacity:.85}
/* area de toque confortavel no X, mesmo em tela pequena */
body.locked .burger{min-width:48px;min-height:48px;align-items:center;justify-content:center}

/* ============================================================
   AUDITORIA MOBILE · correcoes
   ============================================================ */

/* 1 · 100vh no iOS conta a barra de endereco, entao o hero nascia mais alto
   que a tela e o CTA ficava abaixo da dobra. svh mede a viewport pequena,
   que e a que o usuario ve. O vh fica de fallback para navegador antigo. */
.hero{min-height:100vh;min-height:100svh}
.thero-img{height:clamp(300px,48vh,560px);height:clamp(300px,48svh,560px)}
.thero-post .thero-img{height:clamp(280px,42vh,480px);height:clamp(280px,42svh,480px)}
@media(max-width:640px){
  .thero-img{height:clamp(240px,42vh,380px);height:clamp(240px,42svh,380px)}
}

/* 2 · O video de fundo era dimensionado em vh: quando a barra do iOS some,
   a altura muda e o video salta. dvh acompanha sem pulo. */
.hero-video{width:177.78vh;width:177.78dvh;height:56.25vw}

/* 3 · A barra fixa de preco cobria o fim do rodape nas paginas de trip.
   Reservar a altura dela no fim do documento. */
@media(max-width:640px){
  body:has(.tbar){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* 4 · Menu mobile sem scroll: em tela baixa, ou com o teclado aberto, os
   ultimos links ficavam inalcancaveis. */
.mnav{overflow-y:auto;overscroll-behavior:contain;justify-content:safe center}

/* 5 · Navegacao do carrossel: sem wrap, um dot a mais estouraria a linha
   em telas de 360px. */
.vg-nav{flex-wrap:wrap;row-gap:10px}

/* 6 · Slide do carrossel em tela estreita: 30px de padding de cada lado
   comem 16% da largura util. */
@media(max-width:640px){
  .vg-in{padding:22px 20px}
  .trip-body{padding:20px}
}

/* Titulo de pagina interna com frase longa: o clamp padrao chega a 80px e
   a frase toma a tela inteira. Aqui o teto cai para 52px e as duas oracoes
   ficam em linhas proprias. */
.bhero-h1-menor{font-size:clamp(30px,4.4vw,52px);line-height:1.08;max-width:22ch}
@media(max-width:640px){.bhero-h1-menor br{display:none}}

/* Aviso de trip encerrada, inserido pela guarda de expiracao do app.js */
.trip-encerrada{margin-top:20px;padding:14px 18px;border-left:4px solid var(--lagoa);
  background:rgba(233,224,206,.08);color:var(--areia);font-size:15.5px;max-width:60ch;border-radius:var(--r)}

/* ---------- seletor de idioma ----------
   Tres siglas no desktop, nomes completos no menu mobile. O idioma ativo
   fica com fundo cheio para nao depender so da cor, que o daltonico perde. */
.idiomas{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:rgba(233,224,206,.1);border:1px solid rgba(233,224,206,.16)}
.idiomas a{display:grid;place-items:center;min-width:32px;height:26px;padding:0 8px;
  border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:rgba(233,224,206,.62);text-decoration:none;transition:color .18s,background .18s}
.idiomas a:hover{color:var(--areia)}
.idiomas a.on{background:var(--areia);color:var(--abissal)}
.idiomas a:focus-visible{outline:2px solid var(--areia);outline-offset:2px}
/* O seletor fica na ponta direita da barra, depois do CTA. E onde a pessoa
   procura por idioma, e assim ele para de disputar espaco com o botao. */
.nav-dir{display:flex;align-items:center;gap:18px}
@media(max-width:900px){.nav-dir{gap:12px}}
/* No celular sai: o menu ja traz os nomes por extenso, e a barra so tem
   espaco para o logo, o CTA e o burger. O CTA encolhe junto, porque
   "Calendário 2026" e mais largo que o "Quero ir" que estava ali. */
@media(max-width:640px){
  #nav .idiomas{display:none}
  #nav .btn-sun{font-size:13px;padding:11px 18px}
}
@media(max-width:380px){#nav .btn-sun{font-size:12px;padding:10px 14px}}

.mnav-idiomas{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.mnav-idiomas a{padding:9px 16px;min-height:44px;display:grid;place-items:center;
  border:1px solid rgba(233,224,206,.24);border-radius:999px;
  font-size:14px;font-weight:600;color:rgba(233,224,206,.7);text-decoration:none}
.mnav-idiomas a.on{background:var(--areia);color:var(--abissal);border-color:var(--areia)}

/* Faixa que oferece o idioma detectado sem trocar a pagina sozinha. */
.lang-aviso{position:fixed;left:12px;right:12px;bottom:12px;z-index:9997;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  padding:12px 16px;border-radius:var(--r);background:var(--abissal2);
  color:var(--areia);box-shadow:0 12px 34px rgba(10,34,42,.4);
  font-size:14.5px;max-width:640px;margin:0 auto}
.lang-aviso a{padding:8px 16px;min-height:40px;display:grid;place-items:center;
  background:var(--lagoa);color:var(--abissal);border-radius:999px;
  font-weight:700;text-decoration:none;font-size:13.5px}
.lang-aviso button{background:none;border:0;color:rgba(233,224,206,.6);
  font:inherit;font-size:13px;cursor:pointer;padding:8px;min-height:40px;text-decoration:underline}
@media(max-width:480px){.lang-aviso{flex-direction:column;text-align:center;gap:8px}}