:root{--azul:#0a2fd0;--fundo:#061a7a;--ciano:#20c3e0;--linho:#f7f1e6;--tinta:#10183a;--serif:"Bodoni Moda",Georgia,serif;--sans:"Figtree",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--linho);color:var(--tinta);font:400 17px/1.55 var(--sans);overflow-x:clip}
img{display:block;max-width:100%;height:auto}a{color:inherit}h1,h2{font-family:var(--serif);font-weight:400;line-height:1.02;margin:0;letter-spacing:-.01em;text-wrap:balance}em{font-style:italic}
blockquote{margin:0}cite{display:block;font:500 13px/1.3 var(--sans);font-style:normal;margin-top:.7em;opacity:.72}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.demo{background:#000;color:#fff;font-size:13px;line-height:1.35;padding:8px 16px;text-align:center}
.top{position:absolute;z-index:5;left:0;right:0;display:flex;align-items:center;gap:28px;padding:20px clamp(16px,4vw,56px);color:#fff}
.logo{font:italic 400 24px var(--serif);text-decoration:none;margin-right:auto}
.top nav{display:flex;gap:24px}.top nav a{text-decoration:none;font-size:15px;padding:10px 0}.top nav a:hover{text-decoration:underline;text-underline-offset:5px}
.pill{background:#fff;color:var(--azul);text-decoration:none;font-weight:600;font-size:15px;padding:11px 20px;border-radius:99px}
.btn{display:inline-block;background:var(--linho);color:var(--azul);font-weight:600;text-decoration:none;padding:16px 26px;border-radius:99px;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--ciano);outline-offset:3px}

.hero{position:relative;min-height:calc(100svh - 36px);background:linear-gradient(90deg,rgba(6,26,122,.82),rgba(6,26,122,.3) 60%,rgba(6,26,122,.1)),linear-gradient(180deg,rgba(6,26,122,.45),transparent 40%),url(assets/agua.webp) center/cover;color:#fff;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:2vw;padding:110px clamp(16px,4vw,56px) 56px;overflow:hidden}
#rip{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-txt{position:relative;z-index:2}.kick{margin:0 0 18px;font-weight:500}
h1{font-size:clamp(58px,7.4vw,120px);font-weight:500}.sub{max-width:30em;font-size:clamp(18px,1.5vw,21px);margin:24px 0 28px}
.hero-act{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px}.rate b{font:500 24px var(--serif)}
.float{position:relative;z-index:2;will-change:transform;animation:boia 5.5s ease-in-out infinite}
.float img{width:100%;filter:drop-shadow(0 34px 28px rgba(0,10,70,.5))}
@keyframes boia{0%,100%{translate:0 0;rotate:-1.4deg}50%{translate:0 -14px;rotate:1.4deg}}

.cafe{background:var(--azul);color:#fff;padding:clamp(72px,9vw,130px) clamp(16px,4vw,56px)}
.cafe-head{display:grid;grid-template-columns:1.25fr 1fr;gap:5vw;align-items:end}
.cafe h2{font-size:clamp(40px,5.2vw,80px)}.cafe-head p{margin:0;font-size:18px}
.raia{margin-top:clamp(40px,6vw,76px)}
#hora{display:block;font:400 clamp(72px,12vw,180px)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.lane{container-type:inline-size;position:relative;height:clamp(130px,17vw,230px);margin-top:12px;background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.12) 58px 60px),linear-gradient(transparent 46%,rgba(255,255,255,.55) 46% 48%,transparent 48%),#0a48e6;border-block:2px solid rgba(255,255,255,.4);overflow:hidden}
#cesta2{position:absolute;bottom:4%;left:calc(var(--p,.27)*(100cqw - clamp(150px,24vw,320px)));height:92%;width:auto;max-width:none;filter:drop-shadow(0 14px 12px rgba(0,10,70,.45))}
#tempo{width:100%;margin:16px 0 0;accent-color:#fff;height:44px;cursor:grab}
.marks{display:flex;justify-content:space-between;font-size:14px}.nota{margin:12px 0 0;font-size:15px;opacity:.85}
.cafe-quotes{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(48px,6vw,80px);align-items:start}
.cafe-quotes blockquote{font:400 clamp(24px,2.3vw,34px)/1.2 var(--serif)}.cafe-quotes figure{margin:0}.cafe-quotes img{width:100%;aspect-ratio:4/3;object-fit:cover}

.piscina{height:280vh;background:var(--fundo);color:#fff}
.pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1.25fr 1fr;overflow:hidden}
.fotos{position:relative}.fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}.fotos img.on{opacity:1}
.pool-txt{padding:clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vw,38px)}
.pool-txt h2{font-size:clamp(46px,5.6vw,88px)}
#turnos{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#turnos li{border-top:1px solid rgba(255,255,255,.3);padding-top:12px;opacity:.42;transition:opacity .4s}#turnos li.on{opacity:1}
#turnos b{display:block;font-weight:600;margin-bottom:2px}#turnos span{font-size:17px}#turnos cite{display:inline;margin:0 0 0 6px}

.ficar{padding:clamp(72px,9vw,130px) clamp(16px,4vw,56px)}
.ficar h2{font-size:clamp(40px,5.2vw,80px)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}
.tabs button{font:600 16px var(--sans);min-height:46px;padding:0 22px;border-radius:99px;border:1.5px solid var(--azul);background:none;color:var(--azul);cursor:pointer}
.tabs [aria-selected=true]{background:var(--azul);color:#fff}
.painel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:center}
.painel[hidden]{display:none}.painel img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lead{font:400 clamp(28px,3vw,44px)/1.12 var(--serif);margin:0 0 22px}
.painel ul{margin:0;padding:0;list-style:none;columns:2;column-gap:32px}.painel li{break-inside:avoid;padding:10px 0;border-top:1px solid rgba(16,24,58,.16)}
.comum{margin:32px 0 0}

.quadra{display:grid;grid-template-columns:1fr 1fr;background:#fff}
.quadra img{width:100%;height:100%;object-fit:cover;min-height:380px}
.quadra>div{padding:clamp(40px,6vw,88px) clamp(16px,4vw,56px);align-self:center}
.quadra h2{font-size:clamp(38px,4.6vw,70px)}
dl{margin:28px 0;display:grid;gap:4px}dl div{display:flex;align-items:baseline;gap:14px;border-top:1px solid rgba(16,24,58,.16);padding:10px 0}
dt{font:400 34px/1 var(--serif);color:var(--azul);min-width:4.2em}dd{margin:0}

.voltam{padding:clamp(72px,9vw,130px) clamp(16px,4vw,56px)}
.voltam h2{font-size:clamp(40px,5.2vw,80px);max-width:12em}
.vozes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:40px}
.vozes blockquote{font-size:19px;line-height:1.4}.vozes .g{grid-column:1/-1;font:400 clamp(30px,3.6vw,54px)/1.12 var(--serif);color:var(--azul)}

.reservar{background:var(--fundo);color:#fff;padding:clamp(72px,9vw,120px) clamp(16px,4vw,56px)}
.fala{font:italic 400 clamp(30px,4vw,60px)/1.1 var(--serif);max-width:20em;margin:0 0 52px}
.reservar h2{font-size:clamp(30px,3vw,44px);margin-bottom:20px}
form{max-width:760px;display:grid;gap:22px}
fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}legend{padding:0;margin-bottom:8px;font-weight:600}
fieldset label span{display:flex;align-items:center;min-height:46px;padding:0 18px;border:1.5px solid rgba(255,255,255,.5);border-radius:99px;cursor:pointer}
fieldset input{position:absolute;opacity:0}fieldset input:checked+span{background:#fff;color:var(--azul);border-color:#fff}fieldset input:focus-visible+span{outline:3px solid var(--ciano);outline-offset:2px}
.datas{display:grid;grid-template-columns:1fr 1fr;gap:12px}.datas label{font-weight:600;display:grid;gap:6px;min-width:0}
.datas input{width:100%;min-width:0;min-height:48px;font:400 16px var(--sans);padding:0 10px;border:0;border-radius:8px;background:#fff;color:var(--tinta)}
.prev{margin:0;padding:16px 18px;background:rgba(255,255,255,.1);border-radius:10px;font-size:16px}
#wa{justify-self:start}address{font-style:normal;margin-top:44px;font-size:15px;line-height:1.7}

@media(max-width:860px){
 .top nav{display:none}.logo{font-size:21px}.pill{padding:10px 16px}
 .hero{background:linear-gradient(180deg,rgba(6,26,122,.86),rgba(6,26,122,.62) 62%,rgba(6,26,122,.15)),url(assets/agua.webp) center/cover;grid-template-columns:1fr;padding-top:86px;padding-bottom:36px;align-content:start;gap:10px}
 h1{font-size:clamp(54px,16vw,92px)}.sub{margin:16px 0 18px}.float{max-width:86%;justify-self:center;margin-top:8px}
 .cafe-head,.cafe-quotes,.painel,.quadra,.vozes{grid-template-columns:1fr}
 .pin{grid-template-columns:1fr;grid-template-rows:42svh 1fr}.pool-txt{justify-content:flex-start;gap:14px;padding:20px 16px}.pool-txt h2{font-size:42px}
 #turnos{gap:8px}#turnos li{padding-top:8px}#turnos span{font-size:15px;line-height:1.35}
 .painel ul{columns:1}.painel img{aspect-ratio:4/3}.quadra img{min-height:0;aspect-ratio:1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.float{animation:none}.btn,.fotos img,#turnos li{transition:none}
 .piscina{height:auto}.pin{position:static;height:auto;display:block}.fotos{display:grid;gap:4px}.fotos img{position:static;opacity:1;height:auto;aspect-ratio:3/2}#turnos li{opacity:1}}
