:root{
  --creme:#F5E8D5; --creme-claro:#FBF3E6; --marrom:#321903; --mata:#272C16; --sol:#F4BC33;
  --salvia:#9CB2A6; --pessego:#F7DCC6; --coral:#D4573B; --coral-escuro:#C44E32; --whats:#1FA855; --whats-escuro:#15803D;
  --risco:#BC9C6E; --margem:clamp(16px,4vw,56px);
  --titulo:"Fraunces",Georgia,serif; --etiqueta:"Baloo 2",system-ui,sans-serif; --texto:"Poppins",system-ui,sans-serif; --mao:"Caveat",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--marrom);font:400 16px/1.6 var(--texto);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,.h1x{font-family:var(--titulo);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.02em;line-height:1.04;margin:0}
h1{font-size:clamp(34px,4.6vw,66px)}
h2{font-size:clamp(26px,3vw,42px)}
h3{font-size:clamp(20px,1.7vw,25px);font-weight:800}
p{margin:0}
.moldura{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--margem)}
.secao{position:relative;overflow:hidden;padding:clamp(52px,6.5vw,96px) 0}
.secao>.moldura{position:relative;z-index:2}
.areia{background:var(--creme) url(/img/areia.webp?v=flow1)}
.salvia{background:var(--salvia)}
.cafe{background:#c44e32;color:var(--creme)}
.amarelo{background:var(--sol)}
.mata{background:var(--mata);color:var(--creme)}
.foto{border-radius:24px;object-fit:cover;width:100%;background:var(--pessego)}
figure{margin:0}
figcaption{font-size:13px;margin-top:8px}

/* Topo */
.topo{position:sticky;top:0;z-index:40;background:var(--creme-claro)}
.topo .moldura{display:flex;align-items:center;gap:24px;height:92px}
.topo .marca{flex:none;display:block}
.topo .marca img{height:78px;width:auto}
.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu a{font-size:15px;font-weight:500;text-decoration:none;padding:8px 14px;border-radius:99px;transition:background .2s}
.menu a:hover{background:var(--pessego)}
.menu a[aria-current=page]{background:var(--pessego);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 16px/1.1 var(--etiqueta);padding:13px 22px;border-radius:99px;border:0;text-decoration:none;cursor:pointer;transition:transform .15s,background .2s;text-align:center}
.btn:active{transform:scale(.97)}
.btn svg{width:22px;height:22px;flex:none}
.btn-whats{background:var(--whats-escuro);color:#fff}.btn-whats:hover{background:#116a32}
.btn-marrom{background:var(--marrom);color:var(--creme)}.btn-marrom:hover{background:#4a2606}
.topo .btn{margin-left:10px;padding:12px 20px;font-size:16px}
.abre-menu{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;color:var(--marrom)}
.abre-menu svg{width:32px;height:32px;display:block}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

/* Abertura */
.abertura{position:relative;min-height:min(86vh,860px);display:flex;align-items:flex-end;color:var(--creme);overflow:hidden;background:var(--mata)}
.abertura>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.abertura:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(39,44,22,.86) 0%,rgba(39,44,22,.62) 44%,rgba(39,44,22,.12) 78%)}
.abertura .moldura{position:relative;z-index:3;padding-top:90px;padding-bottom:128px}
.abertura h1,.abertura .frases{max-width:min(100%,1180px)}
.abertura .apoio{font-size:clamp(16px,1.15vw,18px);max-width:34em;margin:26px 0 32px}
.sol-raios{position:absolute;z-index:2;color:var(--sol);top:-120px;right:-90px;width:clamp(260px,30vw,460px);animation:gira 120s linear infinite}
.arco{position:absolute;z-index:2;right:-140px;bottom:-200px;width:clamp(460px,52vw,860px);pointer-events:none}
@keyframes gira{to{transform:rotate(360deg)}}
.pilula-local{display:inline-flex;gap:8px;align-items:center;background:var(--sol);color:var(--marrom);font:700 16px/1 var(--etiqueta);padding:9px 16px;border-radius:99px;margin-bottom:22px}
.pilula-local svg{width:16px;height:16px}
.abertura.curta{min-height:min(62vh,600px)}
.abertura.curta .moldura{padding-bottom:72px}
.trilha{font-size:14px;margin-bottom:18px}.trilha a{text-underline-offset:3px}

/* Notas e consulta */
.notas{position:relative;z-index:5;margin-top:-58px}
.notas ul{list-style:none;margin:0;padding:18px 30px;display:flex;flex-wrap:wrap;gap:8px 42px;align-items:center;background:var(--creme-claro);border-radius:24px}
.notas li{font-size:16px}.notas b{font:900 24px/1 var(--titulo);margin-right:6px}
.consulta{background:var(--pessego);border-radius:24px;padding:clamp(24px,3vw,40px);margin-top:20px;position:relative;z-index:5}
.consulta h2{font-size:clamp(22px,2vw,28px)}
.consulta form{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:22px}
.campo{grid-column:span 2;display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;min-width:0}
.campo.largo{grid-column:span 4}
.campo input,.campo select{font:500 16px var(--texto);color:var(--marrom);background:var(--creme-claro);border:1px solid #e3c7a9;border-radius:14px;padding:12px;height:50px;width:100%}
.idades{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px}
.idades:empty{display:none}
.idades label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;width:130px}
.idades select{font:500 16px var(--texto);background:var(--creme-claro);color:var(--marrom);border:1px solid #e3c7a9;border-radius:14px;padding:12px;height:50px}
.resumo{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:center;background:var(--creme-claro);border-radius:18px;padding:18px 22px}
.resumo strong{font:800 clamp(17px,1.2vw,20px)/1.2 var(--titulo);display:block}
.resumo small{font-size:14px;display:block;margin-top:5px}
.ajuda{font-size:15px;margin-top:14px}

/* Títulos com ícone da marca */
.cabeca{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);margin-bottom:clamp(22px,3vw,40px)}
.ic{flex:none;display:inline-grid;place-items:center;border-radius:50%;width:var(--t,72px);height:var(--t,72px);overflow:hidden}
.ic svg{width:66%;height:66%}
.ic img{width:100%;height:100%;object-fit:cover}
.cabeca .ic{--t:clamp(44px,3.8vw,58px)}
.ic-gaivota{background:var(--marrom);color:#e5d7bd}
.ic-sol{background:var(--sol);color:#f6e7cb}
.ic-ondas{background:#94a187;color:#dad3b5}
.ic-coqueiro{background:#eae2cd;color:#d4573b}
.ic-xicara{background:#c44e32;color:#e4d6b6}
.ic-flor{background:#282c11;color:#e4d7bd}
.ic-bola{background:#272c16}
.ic-pata{background:#c44e32;color:#e4d6b6}

/* Fundo: marca solta e marcas na areia */
.solto{position:absolute;z-index:0;pointer-events:none;opacity:.17}
.risco{position:absolute;z-index:1;pointer-events:none;overflow:visible;mix-blend-mode:overlay}
.escrito{position:absolute;z-index:1;pointer-events:none;font:700 clamp(44px,5.4vw,80px)/1 var(--mao);color:#fff;filter:url(#sulco);mix-blend-mode:overlay;transform:rotate(-4deg);white-space:nowrap}

/* Blocos */
.duas{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px);align-items:center}
.duas>.t{grid-column:span 5}.duas>.f{grid-column:span 7}
.duas.inv>.t{order:2}.duas.inv>.f{order:1}
.duas p+p{margin-top:16px}
.duas .t h2{font-size:clamp(24px,2.5vw,36px)}
.par-fotos{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:end}
.par-fotos img:first-child{aspect-ratio:4/3}.par-fotos img:last-child{aspect-ratio:4/5}
.cartao{background:var(--pessego);border-radius:24px;padding:24px 28px;margin-top:24px}
.cartao h3{color:var(--coral-escuro);font-size:19px;margin-bottom:8px}
.lead{font-size:clamp(16px,1.1vw,18px)}

/* Quartos: três cartões iguais */
.quartos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.qcard{background:var(--pessego);border-radius:24px;padding:14px;display:flex;flex-direction:column}
.qfoto{position:relative}
.qfoto img{aspect-ratio:4/3;border-radius:16px}
.selo{display:inline-flex;align-items:center;gap:8px;background:var(--sol);font:700 16px/1 var(--etiqueta);padding:7px 14px 7px 7px;border-radius:99px;color:var(--marrom)}
.selo i{width:22px;height:22px;border-radius:50%;background:var(--coral);display:grid;place-items:center;color:#fff}
.selo i svg{width:14px;height:14px}
.qfoto .selo{position:absolute;top:12px;left:12px}
.qcard .c{padding:18px 10px 8px;display:flex;flex-direction:column;flex:1}
.qcard p{margin:8px 0 12px;font-size:16px}
.checks{list-style:none;padding:0;margin:0 0 18px}
.checks li{position:relative;padding-left:30px;margin:7px 0;font-size:15.5px}
.checks li:before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.4 3.2L15 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.qcard .btn{margin-top:auto;width:100%}
.faixa{background:var(--creme-claro);border-radius:20px;padding:18px 26px;text-align:center;font-weight:600;margin-top:24px}
.ver-mais{display:block;width:max-content;margin:22px auto 0;font:800 17px var(--titulo);text-underline-offset:4px}

/* Lista da estrutura */
.lista-ic{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista-ic li{display:flex;align-items:center;gap:16px;font-size:clamp(15px,1.05vw,17px);font-weight:500}
.lista-ic .ic{--t:50px}

/* Depoimentos e notas */
.nota-grande{display:flex;flex-wrap:wrap;gap:clamp(30px,6vw,90px);align-items:flex-end;margin-bottom:34px}
.nota-grande div b{display:block;font:900 clamp(64px,7.5vw,108px)/.85 var(--titulo);letter-spacing:-.04em}
.nota-grande span{display:block;margin-top:10px;font-weight:600;font-size:15px}
.barras{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 44px;margin-bottom:44px;max-width:900px}
.barra span{display:flex;justify-content:space-between;font-weight:600}
.barra i{display:block;height:12px;border-radius:99px;background:var(--pessego);margin-top:6px;overflow:hidden}
.barra i:after{content:"";display:block;height:100%;width:var(--v);background:var(--sol);border-radius:99px}
.depo{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(18px,2.5vw,36px);align-items:start}
blockquote{margin:0;background:var(--creme-claro);border-radius:24px;padding:28px}
blockquote p{font:700 clamp(17px,1.3vw,20px)/1.3 var(--titulo)}
blockquote cite{font-style:normal;display:block;margin-top:14px;font-weight:600;font-size:15px}

/* Reserve direto */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,44px);margin:30px 0}
.tres p{font:800 clamp(18px,1.6vw,24px)/1.15 var(--titulo)}

/* Cidade */
.atra{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,3vw,44px);align-items:center;margin-bottom:clamp(40px,5vw,70px)}
.atra .f{grid-column:span 7}.atra .t{grid-column:span 5}
.atra:nth-child(even) .f{order:2}.atra:nth-child(even) .t{order:1}
.atra:nth-child(3n) .f{grid-column:span 5}.atra:nth-child(3n) .t{grid-column:span 7}
.atra .foto{aspect-ratio:3/2}
.atra .pil{margin-bottom:12px}
.pil{display:inline-block;background:var(--sol);font:700 16px/1 var(--etiqueta);padding:8px 14px;border-radius:99px}
.atra p{margin:10px 0 12px}
.link{font-weight:700;text-underline-offset:4px}
.credito{font-size:12.5px;opacity:.85}
.coluna{max-width:44em}
.coluna p+p,.coluna p+h2,.coluna h2+p{margin-top:16px}
.lado{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.dicas{background:var(--pessego);border-radius:24px;padding:28px}
.dicas h2{font-size:22px;margin-bottom:12px}
.dicas dt{font-weight:700;margin-top:12px}.dicas dd{margin:2px 0 0}
.perto{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.perto a{display:block;text-decoration:none}
.perto img{aspect-ratio:4/3}
.perto h3{font-size:19px;margin-top:10px}
.mapa iframe{display:block;width:100%;height:clamp(320px,42vw,500px);border:0;border-radius:24px;background:var(--pessego)}
.rotas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.rota{background:var(--pessego);border-radius:24px;padding:28px}
.rota:first-child{grid-column:span 2;background:var(--salvia)}
.rota p{margin-top:10px}.rota .pil{margin-top:12px}
.grupos{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.grupo{position:relative;border-radius:24px;overflow:hidden;grid-column:span 4;background:var(--mata);color:var(--creme);min-height:260px;display:flex;align-items:flex-end}
.grupo:nth-child(1),.grupo:nth-child(5){grid-column:span 6}.grupo:nth-child(2),.grupo:nth-child(6){grid-column:span 6}
.grupo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.68}
.grupo div{position:relative;padding:22px}
.grupo h3{color:var(--creme)}
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.numeros b{display:block;font:900 clamp(34px,3.6vw,54px)/1 var(--titulo)}
.numeros span{font-weight:600}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--pessego);border-radius:24px;padding:clamp(22px,3vw,36px)}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.form .tudo{grid-column:1/-1}
.form input,.form select,.form textarea{font:500 16px var(--texto);color:var(--marrom);background:var(--creme-claro);border:1px solid #e3c7a9;border-radius:14px;padding:13px;width:100%}
.galeria{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.galeria img{height:100%;min-height:240px}
.galeria img:first-child{grid-row:span 2;aspect-ratio:4/3}
.quarto-bloco{margin-bottom:clamp(50px,7vw,100px)}
.bom-saber{columns:2;column-gap:44px}.bom-saber li{break-inside:avoid;margin:8px 0}
details{background:var(--pessego);border-radius:18px;padding:18px 24px;margin-bottom:12px}
summary{font:800 18px/1.25 var(--titulo);cursor:pointer}
details p{margin-top:10px}
.perguntas{max-width:880px}
.gastro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:center}

/* Rodapé */
.rodape{overflow-wrap:anywhere;background:#c44e32;color:var(--creme);position:relative;overflow:hidden;padding:70px 0 30px}
.rodape .nome{font:900 clamp(30px,4.6vw,68px)/1 var(--titulo);font-variation-settings:"SOFT" 100;letter-spacing:-.03em;margin-bottom:36px}
.colunas{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px}
.rodape img.lg{width:150px;margin-bottom:12px}
.rodape h2{font:700 20px var(--etiqueta);letter-spacing:0;margin-bottom:8px;color:var(--sol)}
.rodape ul{list-style:none;padding:0;margin:0}.rodape li{margin:5px 0}
.rodape a{text-underline-offset:3px}
.fim{margin-top:34px;font-size:13.5px;opacity:.85}
.flutua{position:fixed;right:18px;bottom:18px;z-index:50;width:62px;height:62px;border-radius:50%;background:var(--whats-escuro);color:#fff;display:grid;place-items:center}
.flutua svg{width:34px;height:34px}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .rv.ok{opacity:1;transform:none}

@media (max-width:1100px){
  .abre-menu{display:block}
  .topo .btn{display:none}
  .menu{display:none;position:absolute;top:92px;left:0;right:0;background:var(--creme-claro);flex-direction:column;align-items:stretch;padding:10px var(--margem) 22px;gap:2px}
  .menu.aberto{display:flex}
  .menu a{padding:13px 14px;font-size:18px}
  .campo,.campo.largo{grid-column:span 6}
  .duas .t .cabeca{flex-direction:column;align-items:flex-start;gap:12px}
  .escrito{font-size:52px;top:auto!important;bottom:14px!important;right:16px!important;left:auto!important}
}
@media (max-width:760px){
  body{font-size:16px}
  .topo .moldura{height:78px}.topo .marca img{height:64px}.menu{top:78px}
  .abertura{min-height:640px}
  .abertura:before{background:rgba(39,44,22,.6)}
  .abertura .moldura{padding-bottom:110px}
  .abertura .btn{width:100%}
  .abertura.curta h1{font-size:38px!important}
  .sol-raios{top:-90px;right:-90px;width:230px}
  .arco{right:-200px;bottom:-170px;width:460px}
  .notas ul{padding:16px 20px;gap:6px 22px}
  .resumo{grid-template-columns:1fr}.resumo .btn{width:100%}
  .duas>.t,.duas>.f,.atra .f,.atra .t,.atra:nth-child(3n) .f,.atra:nth-child(3n) .t{grid-column:1/-1}
  .duas.inv>.t,.atra:nth-child(even) .f{order:0}.duas.inv>.f,.atra:nth-child(even) .t{order:0}
  .duas>.t{order:0}
  .quartos,.depo,.tres,.perto,.rotas,.gastro,.lado,.barras{grid-template-columns:1fr}
  .rota:first-child{grid-column:auto}
  .grupo,.grupo:nth-child(n){grid-column:1/-1}
  .numeros{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .galeria{grid-template-columns:1fr 1fr}.galeria img:first-child{grid-column:1/-1;grid-row:auto}
  .bom-saber{columns:1}
  .colunas{grid-template-columns:1fr 1fr}
  .cabeca{flex-direction:column;align-items:flex-start;gap:14px}
  .risco.opc{display:none}
  .solto{opacity:.13}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.sol-raios{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
}

.painel{position:relative;overflow:hidden;background:var(--creme) url(/img/areia.webp?v=flow1);display:grid;place-items:center;aspect-ratio:3/2}
.painel span{position:relative;z-index:2;font:700 clamp(30px,3.4vw,52px)/1 var(--mao);color:#fff;filter:url(#sulco);mix-blend-mode:overlay;transform:rotate(-4deg);text-align:center;padding:0 12px}
.perto .painel span{font-size:44px}

/* Versão Stitch: sem textura nem desenhos na areia */
.v-stitch .areia{background:var(--creme)}
.v-stitch .escrito{display:none}
.v-stitch .painel{background:var(--pessego)}
.v-stitch .painel span{font:900 clamp(34px,4.4vw,64px)/1.05 var(--titulo);color:var(--marrom);text-shadow:none;transform:none}

/* Bichinhos da praia */
.caranguejo{position:absolute;z-index:1;width:clamp(58px,6vw,84px);pointer-events:none;--x:0px;--y:0px;--r:0deg}
.caranguejo .corpo{display:block;width:100%;transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform var(--t,1s) cubic-bezier(.3,.1,.4,1),opacity .35s}
.caranguejo.espia .corpo{animation:espia .5s ease-in-out}
.caranguejo.correndo .perna-a{animation:passo .11s ease-in-out infinite alternate}
.caranguejo.correndo .perna-b{animation:passo .11s ease-in-out infinite alternate-reverse}
.caranguejo.correndo .garra{animation:garra .2s ease-in-out infinite alternate}
.caranguejo .perna-a,.caranguejo .perna-b{transform-box:fill-box;transform-origin:50% 0}
.caranguejo .garra{transform-box:fill-box;transform-origin:70% 100%}
.caranguejo .garra.g2{transform-origin:30% 100%}
.caranguejo.escondido .corpo{opacity:0;transform:translate(var(--x),calc(var(--y) + 14px)) scale(.3)}
.caranguejo .buraco{position:absolute;left:28%;bottom:4%;width:44%;height:16%;border-radius:50%;background:#8a6a40;opacity:0;transform:translate(var(--x),var(--y));box-shadow:inset 0 3px 4px rgba(50,25,3,.5);transition:opacity .3s .25s}
.caranguejo.escondido .buraco{opacity:.45}
@keyframes passo{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes garra{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes espia{0%,100%{translate:0}25%{translate:-4px 0}50%{translate:4px 0}75%{translate:-2px 0}}
.bicho{position:absolute;z-index:1;pointer-events:none}
.estrela{animation:respira 6s ease-in-out infinite}
@keyframes respira{50%{scale:1.06}}

/* A onda que apaga o que está escrito na areia */
.mar{position:absolute;left:0;right:0;bottom:0;height:clamp(200px,22vw,320px);z-index:2;pointer-events:none;overflow:hidden}
.onda{position:absolute;inset:0;width:100%;height:100%;transform:translateY(102%)}
.molhado{position:absolute;inset:30% 0 0;background:rgba(140,104,58,.16);opacity:0}
.mar.chega .onda{animation:onda 6.5s cubic-bezier(.45,.05,.35,1) forwards}
.mar.chega .molhado{animation:seca 6.5s ease forwards}
.lavavel{clip-path:inset(0 0 0 0)}
.lavavel.lavando{animation:apaga 8s linear forwards}
@keyframes onda{0%{transform:translateY(102%)}32%{transform:translateY(0)}44%{transform:translateY(5%)}72%,100%{transform:translateY(102%)}}
@keyframes seca{0%,55%{opacity:0}64%{opacity:1}100%{opacity:0}}
@keyframes apaga{0%,24%{opacity:1;clip-path:inset(0 0 0 0)}34%{opacity:0;clip-path:inset(0 0 0 0)}70%{opacity:0;clip-path:inset(0 0 0 0)}71%{opacity:1;clip-path:inset(0 100% 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .caranguejo .corpo,.estrela,.mar .onda,.molhado,.lavavel{animation:none!important;transition:none!important}
}
@media (max-width:760px){.caranguejo{width:52px}.bicho{scale:.8}}
.mar{z-index:1}
/* Maré contínua: a água vem até a areia e volta, sem parar */
.beira{position:absolute;left:0;right:0;bottom:0;height:clamp(150px,16vw,230px);z-index:1;pointer-events:none;overflow:hidden}
.beira .onda{transform:translateY(62%);animation:mare 7s ease-in-out infinite}
.beira .onda.b2{opacity:.55;animation-delay:-3.5s;animation-duration:8.5s}
.beira .molhado{inset:20% 0 0;animation:mareseca 7s ease-in-out infinite}
@keyframes mare{0%,100%{transform:translateY(78%)}45%{transform:translateY(34%)}55%{transform:translateY(38%)}}
@keyframes mareseca{0%,30%{opacity:.25}55%{opacity:.9}100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.beira .onda,.beira .molhado{animation:none}}

/* Caranguejo que segue o mouse */
.siri-mouse{position:fixed;left:0;top:0;width:72px;z-index:45;pointer-events:none;opacity:0;transition:opacity .4s;will-change:transform}
.siri-mouse.vivo{opacity:1}
.siri-mouse .corpo{display:block;width:100%}
.siri-mouse .perna-a,.siri-mouse .perna-b{transform-box:fill-box;transform-origin:50% 0}
.siri-mouse .garra{transform-box:fill-box;transform-origin:70% 100%}
.siri-mouse .garra.g2{transform-origin:30% 100%}
.siri-mouse.correndo .perna-a{animation:passo .1s ease-in-out infinite alternate}
.siri-mouse.correndo .perna-b{animation:passo .1s ease-in-out infinite alternate-reverse}
.siri-mouse.belisca .garra{animation:belisca .16s ease-in-out infinite alternate}
.siri-mouse.belisca .garra.g2{animation-direction:alternate-reverse}
@keyframes belisca{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.siri-mouse{display:none}}

/* Abertura com várias fotos */
.abertura>img.slide{opacity:0;transform:scale(1.08);transition:opacity 1.6s ease}
.abertura>img.slide.ativo{opacity:1;animation:aproxima 9s linear forwards}
@keyframes aproxima{from{transform:scale(1.08)}to{transform:scale(1)}}
.frases{display:grid;max-width:min(100%,1180px)}
.abertura .frase{font-size:clamp(32px,4.2vw,62px)}
.frase{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease;margin:0}
.frase.ativo{opacity:1;transform:none}
.h1{font-family:var(--titulo);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.02em;line-height:1.04;font-size:clamp(34px,4.6vw,66px)}
.pontos{display:flex;gap:10px;margin-top:30px}
.pontos button{width:34px;height:6px;border:0;border-radius:99px;background:rgba(245,232,213,.5);cursor:pointer;padding:0;transition:width .4s,background .4s}
.pontos button[aria-current=true]{width:58px;background:var(--sol)}
.pontos button:hover{background:var(--creme)}
@media (max-width:760px){.h1,.abertura .frase{font-size:clamp(34px,9vw,44px)}}

/* Sol que se põe enquanto a pessoa desce */
.abertura .sol-raios{translate:0 var(--desce,0%);transition:color .3s}

/* Gaivota que cruza a tela de vez em quando */
.gaivota-voa{position:fixed;top:18%;left:0;width:64px;z-index:44;pointer-events:none;color:#321903;opacity:0}
.gaivota-voa.voa{animation:voa var(--dur,11s) linear forwards,bate .5s ease-in-out infinite alternate}
@keyframes voa{0%{opacity:0;transform:translate(-90px,0) scaleX(var(--lado,1))}5%{opacity:.85}50%{transform:translate(50vw,-40px) scaleX(var(--lado,1))}95%{opacity:.85}100%{opacity:0;transform:translate(calc(100vw + 90px),10px) scaleX(var(--lado,1))}}
@keyframes bate{from{scale:1 1}to{scale:1 .55}}

/* Coqueiros balançando com o vento */
.solto-coqueiro{transform-origin:50% 100%;animation:balanca 4.5s ease-in-out infinite alternate}
@keyframes balanca{from{rotate:-2.5deg}to{rotate:3deg}}

/* Pegadas que vão aparecendo enquanto a pessoa desce */
.trilha-pes{position:absolute;top:70px;bottom:70px;width:44px;z-index:1;pointer-events:none}
.trilha-pes svg{position:absolute;width:20px;opacity:0;transition:opacity .5s ease,transform .5s ease;transform:scale(.7)}
.trilha-pes svg.marca{opacity:1;transform:none}
.trilha-pes svg path,.trilha-pes svg ellipse,.trilha-pes svg circle{fill:#fff;filter:url(#sulco)}
.trilha-pes{mix-blend-mode:overlay}
.v-stitch .trilha-pes{mix-blend-mode:normal}
.v-stitch .trilha-pes svg *{fill:#b9966a;filter:none;opacity:.35}
@media (max-width:900px){.trilha-pes{display:none}}

/* Quartos reagem ao mouse */
.qcard{transition:transform .35s ease}
.qcard:hover{transform:translateY(-6px)}
.qfoto{overflow:hidden;border-radius:16px}
.qfoto img{transition:transform .7s ease}
.qcard:hover .qfoto img{transform:scale(1.07)}
.btn:hover svg{animation:balanca-btn .5s ease-in-out}
@keyframes balanca-btn{25%{rotate:-12deg}75%{rotate:12deg}}
@media (prefers-reduced-motion:reduce){
  .abertura>img.slide.ativo,.solto-coqueiro,.gaivota-voa,.btn:hover svg{animation:none!important}
  .qcard:hover,.qcard:hover .qfoto img{transform:none}
}

/* Praia viva: caranguejos pela página inteira e buracos espalhados na areia */
.praia-viva{position:absolute;left:0;top:0;width:100%;z-index:1;pointer-events:none;overflow:hidden}
.toca{position:absolute;width:30px;height:11px;margin:-5px 0 0 -15px;border-radius:50%;background:#7d5e36;opacity:.38;box-shadow:inset 0 3px 4px rgba(50,25,3,.55),0 1px 0 rgba(255,248,236,.6)}
.toca.grande{width:38px;height:14px;margin:-7px 0 0 -19px}
.andarilho{position:absolute;left:0;top:0;width:var(--w,64px);margin:calc(var(--w,64px) * -.35) 0 0 calc(var(--w,64px) * -.5);will-change:transform;transition:opacity .35s}
.andarilho .corpo{display:block;width:100%}
.andarilho .perna-a,.andarilho .perna-b{transform-box:fill-box;transform-origin:50% 0;animation:passo .1s ease-in-out infinite alternate}
.andarilho .perna-b{animation-direction:alternate-reverse}
.andarilho .garra{transform-box:fill-box;transform-origin:70% 100%;animation:garra .2s ease-in-out infinite alternate}
.andarilho .garra.g2{transform-origin:30% 100%}
.andarilho.parado .perna-a,.andarilho.parado .perna-b,.andarilho.parado .garra{animation:none}
.andarilho.entra .corpo{transition:transform .45s ease-in,opacity .45s ease-in;transform:translateY(10px) scale(.25);opacity:0}
@media (prefers-reduced-motion:reduce){.praia-viva{display:none}}

/* Desenhos de dedo em foto real: só o relevo da areia, misturado ao fundo */
.dedo{position:absolute;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.95;height:auto}
.dedo:not([style*=width]){width:min(26vw,300px)}
.mar,.beira{overflow:hidden}
.mar .video-onda,.beira .video-onda{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
.beira{height:clamp(340px,34vw,500px)}
.mar{height:clamp(240px,26vw,380px)}
.mar,.beira{z-index:1}
.beira .onda,.beira .molhado,.mar .onda,.mar .molhado{display:none}
.lavavel.lavando{animation:none}
@media (prefers-reduced-motion:reduce){.video-onda{display:none}.beira,.mar{background:linear-gradient(#0000,#c9ad84 60%)}}

/* Menu do topo com a mesma areia do resto da página */
body:not(.v-stitch) .topo{background:var(--creme) url(/img/areia.webp?v=flow1)}
body:not(.v-stitch) .topo .menu{background:var(--creme) url(/img/areia.webp?v=flow1)}
body:not(.v-stitch) .topo:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(150,112,60,.22)}

/* Gaivota: voa da direita para a esquerda, de frente, batendo as asas */
.gaivota-voa{width:70px;transform-origin:50% 50%}
.gaivota-voa.voa{animation:voa var(--dur,11s) linear forwards,bate .3s ease-in-out infinite alternate}
@keyframes voa{
  0%{opacity:0;transform:translate(calc(100vw + 90px),0)}
  4%{opacity:.9}
  25%{transform:translate(calc(75vw),-26px)}
  50%{transform:translate(calc(50vw),10px)}
  75%{transform:translate(calc(25vw),-22px)}
  96%{opacity:.9}
  100%{opacity:0;transform:translate(-120px,4px)}
}
@keyframes bate{from{scale:1 1}to{scale:1 .42}}

/* Gaivota (voo feito em app.js): a caixa anda, o desenho bate as asas */
.gaivota-voa,.gaivota-voa.voa{animation:none!important;position:fixed;left:0;top:0;width:76px;height:auto;opacity:0;z-index:44;pointer-events:none;color:#321903;will-change:transform}
.gaivota-voa.voa{opacity:.92}
.gaivota-voa svg{display:block;width:100%;height:auto;transform-origin:50% 55%;animation:bate .28s ease-in-out infinite alternate}
.gaivota-voa.plana svg{animation-duration:.9s}
@keyframes bate{from{scale:1 1}to{scale:1 .38}}
@media (prefers-reduced-motion:reduce){.gaivota-voa{display:none}}
/* Menu: areia bem visível, igual ao resto */
body:not(.v-stitch) .topo{background-color:#F0E0C5;background-image:url(/img/areia.webp?v=flow1);background-size:600px}
body:not(.v-stitch) .topo .menu{background-color:#F0E0C5;background-image:url(/img/areia.webp?v=flow1);background-size:600px}

/* Álbum de fotos */
.album{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:clamp(300px,36vw,520px);margin:clamp(20px,2.4vw,34px) 0 18px}
.alb-f{position:relative;overflow:hidden;border:0;padding:0;border-radius:18px;cursor:pointer;background:var(--pessego);box-shadow:0 8px 22px rgba(50,25,3,.14)}
.alb-f img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;display:block}
.alb-f:hover img{transform:scale(1.06)}
.alb-0{grid-row:1 / span 2}
.alb-mais{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(50,25,3,.55);color:var(--creme)}
.alb-mais b{font:600 clamp(28px,3vw,42px)/1 var(--titulo)}
.alb-mais i{font:700 16px var(--etiqueta);font-style:normal;margin-top:4px}
.alb-abas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.alb-chip{font:700 15px var(--etiqueta);padding:12px 18px;border-radius:99px;border:0;background:var(--creme-claro);color:var(--marrom);cursor:pointer;box-shadow:0 4px 14px rgba(50,25,3,.10);transition:background .2s}
.alb-chip:hover{background:var(--pessego)}
@media (max-width:700px){.album{grid-template-columns:1fr 1fr;grid-template-rows:1.4fr 1fr 1fr;height:clamp(420px,110vw,560px)}.alb-0{grid-column:1 / span 2;grid-row:1}}
/* Galeria em tela cheia */
.gal{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:var(--creme)}
.gal-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--margem);border-bottom:1px solid #e3c7a9}
.gal-topo h3{margin:0;font:600 clamp(20px,2vw,26px) var(--titulo)}
.gal-x{width:44px;height:44px;border-radius:50%;border:0;background:var(--pessego);color:var(--marrom);font:600 22px var(--texto);cursor:pointer}
.gal-abas{display:flex;gap:8px;overflow-x:auto;padding:12px var(--margem)}
.gal-abas button{flex:none;font:700 15px var(--etiqueta);padding:10px 16px;border-radius:99px;border:0;background:var(--creme-claro);color:var(--marrom);cursor:pointer}
.gal-abas button.on{background:var(--marrom);color:var(--creme)}
.gal-grade{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-auto-flow:dense;grid-auto-rows:clamp(130px,14vw,190px);align-content:start;gap:10px;padding:6px var(--margem) 30px}
.gal-grade button{border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--pessego);height:100%}
.gal-grade button.g{grid-column:span 2;grid-row:span 2}
.gal-grade img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.gal-grade button:hover img{transform:scale(1.05)}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(40,20,3,.94)}
.lb img{max-width:94vw;max-height:84vh;border-radius:10px;object-fit:contain}
.lb button{position:absolute;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font:600 24px var(--texto);cursor:pointer}
.lb .fx{top:16px;right:16px}.lb .fa{left:12px}.lb .fp{right:12px}
.lb span{position:absolute;bottom:18px;color:#fff;font:600 15px var(--texto);opacity:.85}
.cafe .ic-xicara{background:#6B4426;color:#e4d6b6}