@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:500 800;font-stretch:100%;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  --mar:#0E64E8; --ceu:#3BB2F4; --fundo:#06284F; --noite:#05080D; --espuma:#F4FAFF; --folha:#3E8E41;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --text:"Figtree","Segoe UI",system-ui,sans-serif;
  --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 1.0625rem/1.55 var(--text);background:var(--noite);color:var(--espuma);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--ceu);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--display);line-height:1.02;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.9rem,9vw,6.8rem);max-width:11ch;text-shadow:0 4px 30px rgba(0,20,60,.45)}
h2{font-size:clamp(2rem,5vw,3.4rem);max-width:16ch}
p{max-width:52ch}
.lede{font-size:clamp(1.1rem,2.2vw,1.35rem);margin-top:22px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font:600 1rem var(--text);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-white{background:var(--espuma);color:var(--fundo)}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-mar{background:var(--mar);color:#fff}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* camadas de foto com paralaxe */
.ph{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform}
.shade{position:absolute;inset:0}

/* topo */
header{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px var(--gut);max-width:1280px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:54px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,30,80,.5))}
nav{display:flex;gap:6px}
nav a{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem;color:#fff;text-shadow:0 1px 8px rgba(0,30,80,.6)}
nav a:hover{background:rgba(255,255,255,.18)}
@media(max-width:640px){nav a:not(.keep){display:none}}

/* 0 m: hero */
.hero{position:relative;min-height:100svh;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.hero .shade{background:linear-gradient(180deg,rgba(6,40,79,.35) 0%,rgba(6,40,79,0) 35%,rgba(6,40,79,.78) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(70px,11vw,130px);width:100%}
.hero .nome{width:min(440px,70vw);margin-bottom:18px;filter:drop-shadow(0 3px 10px rgba(0,30,80,.55))}
.cue{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);font-size:.85rem;opacity:.85}

/* 5 m: o guia */
.guia{position:relative;overflow:hidden;color:#fff;padding:clamp(80px,12vw,160px) 0}
.guia .shade{background:linear-gradient(90deg,rgba(14,100,232,.92) 0%,rgba(14,100,232,.7) 55%,rgba(6,40,79,.5) 100%)}
.guia .grid{position:relative;z-index:2;display:grid;gap:clamp(32px,6vw,80px);grid-template-columns:1.1fr 1fr;align-items:center}
.agora{background:rgba(6,40,79,.42);border:1px solid rgba(255,255,255,.3);border-radius:28px;padding:22px;backdrop-filter:blur(10px)}
.agora b{display:block;font:800 1.25rem var(--display);margin-bottom:14px}
.agora ul{list-style:none;padding:0;display:grid;gap:10px}
.agora li{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.12)}
.agora li span:last-child{font-weight:600}
@media(max-width:820px){.guia .grid{grid-template-columns:1fr}}

/* faixa de praias: rolagem vertical move a faixa para o lado */
.praias{position:relative;height:340vh;background:var(--fundo)}
.praias .pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:28px}
.praias .head{padding:0 var(--gut);max-width:1280px;margin:0 auto;width:100%}
.praias .head p{margin-top:10px;opacity:.85}
.track{display:flex;gap:18px;padding:0 var(--gut);will-change:transform;width:max-content}
.card{position:relative;flex:none;--ch:clamp(220px,calc(100svh - 320px),520px);width:min(calc(var(--ch)*.75),78vw);aspect-ratio:3/4;border-radius:26px;overflow:hidden;text-decoration:none;color:#fff;background:#0a3a6e}
.card:nth-child(even){margin-top:36px}
.card-all{background:linear-gradient(160deg,var(--mar),var(--fundo));display:flex;align-items:flex-end}
.card-all::after{display:none}
.card .im{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s}
.card:hover .im{transform:scale(1.06)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(6,40,79,.88))}
.card span{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;font:800 1.35rem/1.05 var(--display)}
.progress{height:3px;margin:0 var(--gut);background:rgba(255,255,255,.2);border-radius:3px;max-width:1120px;align-self:center;width:calc(100% - 2*var(--gut))}
.progress i{display:block;height:100%;width:0;background:var(--ceu);border-radius:3px}

/* 12 m: roteiro */
.roteiro{position:relative;overflow:hidden;background:var(--fundo);padding:clamp(80px,12vw,160px) 0}
.roteiro .ph{opacity:.38}
.roteiro .shade{background:linear-gradient(180deg,var(--fundo) 0%,rgba(6,40,79,.55) 40%,var(--fundo) 100%)}
.roteiro .wrap{position:relative;z-index:2}
.small{font-size:.9rem;opacity:.75}

/* 20 m: midia kit */
.kit{position:relative;overflow:hidden;background:var(--noite);padding:clamp(80px,12vw,150px) 0}
.kit .ph{opacity:.28}
.kit .shade{background:linear-gradient(180deg,var(--noite) 0%,rgba(5,8,13,.35) 50%,var(--noite) 100%)}
.kit .wrap{position:relative;z-index:2}

footer{background:var(--noite);padding:40px var(--gut);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;opacity:.85;font-size:.95rem;max-width:1280px;margin:0 auto}
.credito{max-width:1280px;margin:0 auto;padding:0 var(--gut) 30px;font-size:.8rem;opacity:.55;background:var(--noite)}

/* medidor de profundidade */
.depth{position:fixed;right:clamp(8px,2vw,22px);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;font:600 .8rem var(--text);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none}
.depth i{width:2px;height:120px;background:currentColor;opacity:.7;position:relative}
.depth i::after{content:"";position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:currentColor;top:var(--p,0%);transition:top .4s}
@media(max-width:640px){.depth{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.praias{height:auto}.praias .pin{position:static;height:auto;padding:60px 0;overflow-x:auto}}