/* Considera o Vento — estilos do app (mobile primeiro, sem framework) */
@font-face{font-family:"Noto Serif Hebrew";src:url(/assets/fontes/noto-serif-hebrew.woff2) format("woff2");font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;src:url(/assets/fontes/cormorant-italico.woff2) format("woff2");font-display:swap}

:root{
  --verde:#1f7a4d;
  --verde-esc:color-mix(in srgb,var(--verde) 72%,#000);
  --verde-claro:color-mix(in srgb,var(--verde) 14%,#fff);
  --areia:#f4efe4;--papel:#fffdf8;--tinta:#10241a;--suave:#5c6d63;--linha:#e2dbcb;
  --mar:#0b6e8a;--terral:#1d8a52;--lateral:#b97c0c;--maral:#c0442c;--calmo:#3c7ca3;
  --raio:20px;--sombra:0 1px 2px rgba(16,36,26,.06),0 8px 24px rgba(16,36,26,.08);
  --fonte:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --poetica:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --nav:64px;color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--areia:#0d1712;--papel:#15221b;--tinta:#e9f0eb;--suave:#9db0a4;--linha:#26372d;--verde-claro:color-mix(in srgb,var(--verde) 25%,#0d1712);--sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--areia);color:var(--tinta);font:16px/1.5 var(--fonte);padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom));min-height:100vh}
body.sem-nav{padding-bottom:0}
a{color:var(--mar)}
@media (prefers-color-scheme:dark){a{color:#6cc3de}}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{line-height:1.15;margin:0;letter-spacing:-.01em}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--verde) 60%,#fff);outline-offset:2px;border-radius:6px}

/* ---------- versículo ---------- */
.versiculo{position:relative;padding:8px 44px 8px 14px;background:var(--papel);border-bottom:1px solid var(--linha);font-size:13px;line-height:1.45;color:var(--suave)}
.versiculo p{margin:0;max-width:720px;margin-inline:auto}
.v-he{font-family:"Noto Serif Hebrew","SBL Hebrew","Times New Roman",serif;font-size:15px;color:var(--tinta);opacity:.85}
.v-pt cite{font-style:normal;white-space:nowrap}
.v-troca{position:absolute;right:6px;top:50%;translate:0 -50%;border:0;background:none;padding:8px;font-size:11px;font-weight:700;letter-spacing:.06em;opacity:.25}
.v-troca:hover,.v-troca:focus-visible{opacity:.7}

/* ---------- layout ---------- */
main{max-width:560px;margin:0 auto;padding:14px 14px 8px}
.pagina{max-width:560px;margin:0 auto;padding:18px 16px 24px}
.pagina h1{font-size:28px;margin:6px 0 14px}
.pagina h2{font-size:19px;margin:22px 0 8px}
.pagina p,.pagina li{color:var(--tinta)}
.cartao{background:var(--papel);border-radius:var(--raio);box-shadow:var(--sombra);padding:18px}

/* ---------- card verde ---------- */
.card-vento{position:relative;background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--verde) 70%,#9be0b8) 0,transparent 60%),var(--verde);color:#fff;border-radius:26px;padding:18px 18px 14px;box-shadow:0 10px 30px color-mix(in srgb,var(--verde) 35%,transparent);overflow:hidden}
.cv-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cv-topo h1{font-size:22px;font-weight:800;letter-spacing:-.02em}
.cv-sub{margin:2px 0 0;font-size:14px;opacity:.85}
.cv-dir{display:flex;flex-direction:column;align-items:center;min-width:64px}
.cv-dir strong{font-size:26px;font-weight:800;line-height:1}
.flecha{width:54px;height:54px;color:#fff;transform:rotate(var(--giro,0deg));transition:transform .8s cubic-bezier(.3,1.4,.5,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.flecha use{transform-origin:32px 32px}
@media (prefers-reduced-motion:no-preference){.sopro use{animation:sopro 3.2s ease-in-out infinite}}
@keyframes sopro{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.04)}}
.cv-meio{display:grid;grid-template-columns:minmax(92px,34%) 1fr;gap:10px;align-items:center;margin-top:6px}
.ilha{width:100%;max-height:250px}
.ilha-terra{fill:rgba(255,255,255,.2);stroke:rgba(255,255,255,.75);stroke-width:.8;stroke-linejoin:round}
.ilha-lagoa{fill:color-mix(in srgb,var(--verde) 80%,#0b6e8a);stroke:rgba(255,255,255,.5);stroke-width:.5}
.ponto circle{fill:#fff}
.ponto.p1 circle{fill:#ffd66b}
.ponto text{font:700 7px var(--fonte);fill:var(--verde-esc);text-anchor:middle}
.cv-lado{display:flex;flex-direction:column;align-items:center;text-align:center}
.rosa{width:min(150px,100%);height:auto}
.rosa-anel{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1}
.rosa-estrela{fill:rgba(255,255,255,.9)}
.rosa-estrela2{fill:rgba(255,255,255,.45)}
.rosa text{font:700 9px var(--fonte);fill:#fff;text-anchor:middle}
.rosa .rosa-n{font-size:11px}
.rosa-marca{fill:#ffd66b}
#rosa-de{transition:transform .8s ease}
.temp{font-size:56px;font-weight:800;line-height:1;letter-spacing:-.04em;margin-top:4px}
.cv-min{margin:2px 0 0;font-size:13px;opacity:.85;min-height:1em}
.cv-acoes{display:flex;align-items:center;gap:10px;margin-top:12px}
.btn-mais{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none;transition:transform .25s}
.btn-mais svg{width:20px;height:20px;color:#fff}
.btn-mais[aria-expanded=true]{transform:rotate(45deg)}
.btn-explorar{background:#fff;color:var(--verde-esc)!important;text-decoration:none;font-weight:700;padding:10px 18px;border-radius:999px;font-size:15px}
.cv-hora{margin:0 0 0 auto;font-size:12px;opacity:.8;text-align:right;line-height:1.3}
.cv-painel{margin-top:14px;border-top:1px solid rgba(255,255,255,.25);padding-top:12px}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0}
.grade div{background:rgba(255,255,255,.1);border-radius:14px;padding:9px 11px}
.grade dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.grade dd{margin:1px 0 0;font-weight:700;font-size:15px}
.grade dd small{font-weight:400;opacity:.8;display:block;font-size:12px}
.aviso-final{display:block;margin:14px 0 0;padding:12px 16px;border-radius:16px;background:#fff3cf;color:#6b4b00!important;text-decoration:none;font-weight:600;font-size:14px}

/* ---------- ranking ---------- */
.ranking{margin-top:22px}
.rk-topo{display:flex;align-items:center;gap:10px}
.rk-topo h2,.t-lista{font-size:20px;font-weight:800}
.offline-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:#5c6d63;color:#fff;border-radius:999px;padding:2px 8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1.5px solid var(--linha);background:var(--papel);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;color:var(--suave)}
.chip[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.chips-sub{padding-top:4px}
.chip-p{font-size:13px;padding:5px 12px}
.carrossel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:8px -14px 0;padding:4px 14px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.carrossel::-webkit-scrollbar{display:none}
.cartao-praia{position:relative;flex:0 0 86%;scroll-snap-align:center;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--verde-esc);color:#fff;box-shadow:var(--sombra);text-decoration:none;display:block}
.cartao-praia:only-child{flex-basis:100%}
.cartao-praia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cartao-praia::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 26%,transparent 48%,rgba(0,0,0,.72) 100%);pointer-events:none}
.sem-foto{position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--verde) 85%,#9be0b8),var(--mar))}
.sem-foto svg{position:absolute;right:-8%;bottom:-6%;width:62%;opacity:.18}
.cp-topo,.cp-base{position:absolute;left:0;right:0;z-index:2;padding:16px}
.cp-topo{top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cp-pos{font-size:44px;font-weight:900;line-height:.9;letter-spacing:-.04em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.cp-pos small{font-size:.5em;vertical-align:top}
.tipo{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px 5px 8px;font-size:13px;font-weight:700;background:rgba(255,255,255,.92);color:var(--tinta)}
.tipo .flecha{width:20px;height:20px;filter:none;transition:none}
.tipo.terral .flecha{color:var(--terral)}.tipo.lateral .flecha{color:var(--lateral)}.tipo.maral .flecha{color:var(--maral)}.tipo.calmo .flecha{color:var(--calmo)}
.cp-base{bottom:0}
.cp-nome{font-size:clamp(30px,9vw,42px);font-weight:900;letter-spacing:-.03em;line-height:1;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.cp-info{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px}
.cp-nota{font-weight:800;background:rgba(0,0,0,.28);border-radius:10px;padding:3px 8px}
.curtir{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:rgba(0,0,0,.28);color:#fff;border-radius:999px;padding:7px 12px;font-weight:700;position:relative;z-index:3}
.curtir svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2}
.curtir[aria-pressed=true] svg{fill:#ff5a6e;stroke:#ff5a6e}
.curtir.pulso svg{animation:pulso .4s}
@keyframes pulso{50%{transform:scale(1.35)}}
.cp-credito{margin-top:8px;font-size:12px;opacity:.9}
.dedic{font-family:var(--poetica);font-style:italic;font-weight:500;font-size:19px;line-height:1.25;margin-top:6px}
.bolinhas{display:flex;justify-content:center;gap:6px;margin-top:8px;min-height:8px}
.bolinhas i{width:6px;height:6px;border-radius:50%;background:var(--linha);transition:all .2s}
.bolinhas i.on{background:var(--tinta);width:16px;border-radius:4px}
.convite{text-align:center;margin:8px 0 0;font-size:13px}
.convite a{color:var(--suave);text-decoration:none}
.vazio{flex:1;padding:28px 18px;text-align:center;color:var(--suave);background:var(--papel);border-radius:20px}
.t-lista{margin:26px 0 8px}
.lista{list-style:none;margin:0;padding:0;background:var(--papel);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden}
.lista li+li{border-top:1px solid var(--linha)}
.lista a{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:11px 14px;color:inherit;text-decoration:none}
.l-pos{font-weight:800;font-size:18px;color:var(--suave);text-align:center}
.l-nome{font-weight:700;line-height:1.2}
.l-nome small{display:block;font-weight:500;color:var(--suave);font-size:12.5px}
.l-dir{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.l-dir .flecha{width:22px;height:22px;filter:none;transition:none}
.barra{height:4px;border-radius:2px;background:var(--linha);margin-top:5px;overflow:hidden}
.barra i{display:block;height:100%;border-radius:2px}
.terral{--c:var(--terral)}.lateral{--c:var(--lateral)}.maral{--c:var(--maral)}.calmo{--c:var(--calmo)}
.l-dir,.l-dir .flecha{color:var(--c)}
.barra i{background:var(--c,var(--verde))}
.legenda{font-size:12.5px;color:var(--suave);margin:10px 2px 0}
.tv{color:var(--c)}

/* ---------- navegação e rodapé ---------- */
.nav-baixo{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-around;background:color-mix(in srgb,var(--papel) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linha);padding:6px 8px calc(6px + env(safe-area-inset-bottom));height:calc(var(--nav) + env(safe-area-inset-bottom))}
.nav-baixo a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--suave);text-decoration:none;font-size:11.5px;font-weight:600;min-width:72px;max-width:120px;overflow:hidden}
.nav-baixo a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-baixo svg{width:24px;height:24px}
.nav-baixo a[aria-current=page]{color:var(--verde)}
.rodape{max-width:560px;margin:26px auto 0;padding:0 18px 18px;font-size:12px;color:var(--suave);text-align:center}
.rodape p{margin:4px 0}.rodape a{color:inherit}

/* ---------- formulários e botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 18px;font-weight:700;background:var(--verde);color:#fff!important;text-decoration:none;font-size:16px}
.btn:disabled{opacity:.55}
.btn-sec{background:var(--papel);color:var(--tinta)!important;border:1.5px solid var(--linha)}
.btn-perigo{background:#b3261e}
.btn-bloco{width:100%}
.campo{display:block;margin:12px 0}
.campo span{display:block;font-size:13px;font-weight:700;margin-bottom:5px;color:var(--suave)}
input[type=text],input[type=email],input[type=search],input:not([type]),textarea,select{width:100%;font:inherit;font-size:16px;color:var(--tinta);background:var(--papel);border:1.5px solid var(--linha);border-radius:12px;padding:11px 13px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--verde)}
.codigo-input{letter-spacing:.5em;font-size:26px!important;text-align:center;font-weight:700}
.msg{border-radius:12px;padding:10px 13px;margin:10px 0;font-size:14px}
.msg.erro{background:#fde7e3;color:#8a1f10}.msg.ok{background:var(--verde-claro);color:var(--tinta)}
.dica{font-size:13px;color:var(--suave)}
.sugestoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:12px 0}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--verde)}

/* ---------- card da praia aberto ---------- */
.pg-praia main{padding:0 0 10px;max-width:640px}
.galeria{position:relative;background:#0b1510}
.fotos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/5;max-height:78vh}
.fotos::-webkit-scrollbar{display:none}
.foto{position:relative;flex:0 0 100%;scroll-snap-align:center;margin:0}
.foto img{width:100%;height:100%;object-fit:cover}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 30px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:12.5px}
.foto .votar{position:absolute;right:12px;top:62px;border:0;border-radius:999px;background:rgba(0,0,0,.4);color:#fff;padding:6px 11px;font-size:13px;font-weight:700;display:flex;gap:5px;align-items:center}
.foto .votar svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2}
.foto .votar[aria-pressed=true] svg{fill:#ffd66b;stroke:#ffd66b}
.selo{display:inline-block;background:#ffd66b;color:#3b2a00;border-radius:999px;padding:2px 9px;font-weight:800;font-size:11.5px;margin-right:4px}
.galeria .bolinhas{position:absolute;bottom:10px;left:0;right:0;margin:0;z-index:2}
.galeria .bolinhas i{background:rgba(255,255,255,.45)}.galeria .bolinhas i.on{background:#fff}
.topo-flutuante{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px;z-index:3;pointer-events:none}
.topo-flutuante>*{pointer-events:auto}
.circulo{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;display:grid;place-items:center;border:0;text-decoration:none}
.circulo svg{width:22px;height:22px}
.pr-cab{padding:16px 16px 4px;display:flex;align-items:flex-start;gap:12px}
.pr-cab h1{font-size:32px;font-weight:900;letter-spacing:-.03em}
.pr-pos{font-size:15px;color:var(--suave);font-weight:600;margin-top:4px}
.pr-cab .curtir{background:var(--papel);color:var(--tinta);border:1.5px solid var(--linha);margin-top:4px}
.pr-cab .curtir svg{stroke:var(--tinta)}
.bloco{background:var(--papel);border-radius:var(--raio);box-shadow:var(--sombra);margin:12px 14px;padding:16px}
.bloco h2{font-size:17px;font-weight:800;margin-bottom:8px}
.vento-praia{display:flex;gap:14px;align-items:center}
.vento-praia .flecha{width:60px;height:60px;flex:none;filter:none;color:var(--c)}
.vento-praia p{margin:0}
.nota-grande{font-size:34px;font-weight:900;color:var(--c);line-height:1}
.dedic-bloco{text-align:center;padding:10px 20px}
.dedic-bloco .dedic{font-size:24px;color:var(--tinta)}
.detalhes{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.detalhes dt{color:var(--suave)}
.detalhes dd{margin:0;font-weight:600}
.trechos{list-style:none;margin:0;padding:0}
.trechos li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-top:1px solid var(--linha)}
.trechos li:first-child{border-top:0}
.trechos .t-frase{grid-column:1/-1;font-size:13px;color:var(--suave)}
.acoes-linha{display:flex;gap:10px;flex-wrap:wrap}
.comentario{padding:10px 0;border-top:1px solid var(--linha)}
.comentario:first-child{border-top:0}
.comentario b{font-size:14px}
.comentario p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.comentario .meta{font-size:12px;color:var(--suave);display:flex;gap:10px}
.comentario .meta button{border:0;background:none;padding:0;color:var(--suave);font-size:12px;text-decoration:underline}
.aviso-filtro{background:#fde7e3;color:#8a1f10;border-radius:12px;padding:10px 12px;font-size:14px;margin:8px 0}
.previa{background:var(--areia);border-radius:10px;padding:8px 10px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px}
.previa mark{background:#ffb4a6;color:#5c0d00;border-radius:3px;padding:0 2px}
.envio-foto img{border-radius:12px;max-height:260px;object-fit:cover;width:100%;margin:8px 0}
.por-aqui li{padding:8px 0;border-top:1px solid var(--linha)}

/* ---------- modal simples ---------- */
dialog{border:0;border-radius:22px;padding:20px;max-width:min(440px,calc(100vw - 24px));width:100%;background:var(--papel);color:var(--tinta);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(8,20,14,.55)}
dialog h2{font-size:20px;margin-bottom:8px}
.toast{position:fixed;left:50%;bottom:calc(var(--nav) + 16px);translate:-50% 0;background:var(--tinta);color:var(--papel);padding:10px 16px;border-radius:12px;font-size:14px;z-index:99;max-width:90vw;box-shadow:var(--sombra)}

/* ---------- conteúdo de texto (legal, sobre) ---------- */
.texto h2{margin-top:24px}
.texto p,.texto li{line-height:1.6}
.texto .rascunho{background:#fff3cf;color:#6b4b00;border-radius:12px;padding:10px 12px;font-size:14px}

@media (min-width:720px){
  .cartao-praia{flex-basis:70%}
  .v-he{font-size:16px}
}

/* ---------- explorar ---------- */
.pg-explorar{padding-bottom:0;overflow:hidden}
.explorar{max-width:none;padding:0;position:relative}
.mapa-cheio{position:fixed;inset:0 0 calc(var(--nav) + env(safe-area-inset-bottom)) 0;z-index:1;background:#cfe3ea}
.voltar-mapa{position:fixed;top:12px;left:12px;z-index:5;background:var(--papel);color:var(--tinta);box-shadow:var(--sombra)}
.marcar-btn{position:fixed;right:12px;bottom:calc(var(--nav) + 24px + env(safe-area-inset-bottom));z-index:5;box-shadow:var(--sombra);border-radius:999px}
.folha{position:fixed;left:8px;right:8px;bottom:calc(var(--nav) + 8px + env(safe-area-inset-bottom));z-index:6;background:var(--papel);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.3);padding:16px 16px 14px;max-width:520px;margin:0 auto;max-height:55vh;overflow:auto}
.folha h2{font-size:20px;margin-right:30px}
.folha p{margin:6px 0}
.folha .acoes-linha .btn{padding:9px 14px;font-size:14px}
.folha-fechar{position:absolute;right:10px;top:8px;border:0;background:none;font-size:28px;line-height:1;color:var(--suave)}
.seta-mapa{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.seta-mapa .flecha{width:26px;height:26px;filter:none;transition:none;color:var(--c,var(--verde))}
.seta-mapa b{position:absolute;top:-8px;right:-8px;background:var(--tinta);color:#fff;border-radius:10px;font:800 10px/1 var(--fonte);padding:3px 5px}
.pino{width:30px;height:30px;border-radius:50% 50% 50% 0;rotate:-45deg;display:grid;place-items:center;background:var(--mar);box-shadow:0 1px 4px rgba(0,0,0,.4);border:2px solid #fff}
.pino span{rotate:45deg;font-size:15px}
.pino.pendente{opacity:.55;background:#6b7c72}
.leaflet-container{font:inherit}
.leaflet-control-layers-expanded{font-size:14px}