/* Bairro São João — "uma janela para o bairro, agora".
   Topo: paisagem viva que segue a hora real (céu, sol, lua, ônibus 141).
   Corpo: casa caiada (cal, verde de janela, anil do barrado, amarelo-ipê). */

@font-face{font-family:"Young Serif";src:url(../fonts/young-serif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-hyperlegible-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../fonts/atkinson-hyperlegible-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* página */
  --cal:#F2F4EE; --papel:#FFFFFF; --papel-vidro:rgba(255,255,255,.86);
  --tinta:#17251C; --tinta-2:#55635A; --linha:#DCE1D6;
  --janela:#1F5A3B; --janela-forte:#174A30; --sobre-janela:#FFFFFF; --janela-claro:#E1EFE5;
  --anil:#2D4B8E; --anil-claro:#E4EAF7; --ipe:#E0A818; --ipe-claro:#FBF0D0;
  --barro:#9A5A34; --perigo:#B3361E; --perigo-claro:#FBE5DF; --laranja:#C25E10; --laranja-claro:#FDEBDB; --ok:#2E7744;
  --sombra:0 1px 2px rgba(23,37,28,.06),0 8px 24px rgba(23,37,28,.08);
  --sombra-alta:0 2px 4px rgba(23,37,28,.08),0 18px 48px rgba(23,37,28,.16);
  --veu:rgba(8,14,10,.55);
  --f-titulo:"Young Serif",Georgia,"Times New Roman",serif;
  --f-texto:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --mola:cubic-bezier(.2,.8,.2,1);

  /* paisagem (o céu é ajustado pelo cena.js conforme a hora) */
  --ceu-topo:#6FA6D8; --ceu-meio:#A9CDE6; --ceu-base:#DDEBEF; --brilho:rgba(255,236,170,.75);
  --noite:0; --luzes:0; --hero-tinta:#13261A; --hero-tinta-2:#2C4436; --hero-acento:#1F5A3B; --rol:0;
  --serra:#A7BEC6; --serra-2:#8FAE9C; --morro-medio:#6D9A60; --arauc:#2F573A; --morro-perto:#5A8A4A;
  --estrada:#C99D6E; --chao:#3C6838; --capim:#2C5230; --parede:#FBF8F0; --telhado:#A4542D;
  --porta:#2D4B8E; --janela-dia:#44607E; --luz:#FFD27A; --copa:#4F8A47; --tronco:#6B4A2E;
  --placa:#6B4226; --madeira:#4F3320;

  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme:dark){:root{
  --cal:#111814; --papel:#1A231D; --papel-vidro:rgba(26,35,29,.86);
  --tinta:#E8EDE6; --tinta-2:#A3AEA6; --linha:#2C3830;
  --janela:#6CC593; --janela-forte:#8AD6AB; --sobre-janela:#0C1A11; --janela-claro:#1D3326;
  --anil:#97AEEA; --anil-claro:#1E2741; --ipe:#EDBF45; --ipe-claro:#3A2F12;
  --barro:#D49870; --perigo:#F28068; --perigo-claro:#3D1D16; --laranja:#F0A058; --laranja-claro:#3A2614; --ok:#6CC593;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --sombra-alta:0 2px 4px rgba(0,0,0,.35),0 18px 48px rgba(0,0,0,.5);
  color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--cal);color:var(--tinta);font:18px/1.55 var(--f-texto);margin:0;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--janela)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ipe);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-titulo);font-weight:400;text-wrap:balance;margin:0;line-height:1.12;letter-spacing:-.01em}
p{margin:0}
.gutter{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.wrap{max-width:1080px;margin-left:auto;margin-right:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.muted{color:var(--tinta-2)}
.small{font-size:.88rem}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;padding:13px 20px;font-weight:700;border:1.5px solid var(--janela);background:var(--janela);color:var(--sobre-janela);text-decoration:none;cursor:pointer;min-height:52px;transition:transform .2s var(--mola),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px color-mix(in srgb,var(--janela) 60%,transparent)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.sec{background:transparent;color:var(--janela)}
.btn svg{width:22px;height:22px;flex:none}
.btn[disabled]{opacity:.55;cursor:wait;transform:none}
.btn-peq{min-height:40px;padding:8px 14px;border-radius:11px;font-size:.92rem}
.btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sozinho{align-self:flex-start}

/* ================= HERO: paisagem viva ================= */
.hero{position:relative;height:clamp(460px,64svh,700px);overflow:hidden;background:var(--ceu-base);isolation:isolate}
.cena{position:absolute;inset:0;width:100%;height:100%;display:block}
.particulas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.c-topo{stop-color:var(--ceu-topo)}.c-meio{stop-color:var(--ceu-meio)}.c-base{stop-color:var(--ceu-base)}
.c-brilho{stop-color:var(--brilho)}.c-brilho-fim{stop-color:var(--brilho);stop-opacity:0}
.c-topo,.c-meio,.c-base{transition:stop-color 2.4s ease}
.ceu{fill:url(#gCeu)}

.estrelas circle{fill:#FFF8E6;opacity:calc(var(--noite) * var(--a,1))}
.js .estrelas circle{animation:pisca var(--d,4s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes pisca{50%{opacity:calc(var(--noite) * .25)}}

.sol-brilho{fill:url(#gBrilho)}
.sol-disco{fill:#FFD86B}
.lua-brilho{fill:url(#gBrilho);opacity:.5}
.lua-disco{fill:#F4F1E2}
.lua-sombra{fill:#2A3658;opacity:.55}
.astro{transition:transform 2.2s var(--mola),opacity 1.6s}
.js .hero:not(.pronta) .astro{opacity:0}

.nuvem ellipse{fill:#fff;opacity:calc(.92 - var(--noite) * .62)}
.nuvem{animation:nuvem var(--t) linear infinite;animation-delay:var(--dl)}
.n1{--y:150px;--t:190s;--dl:-60s}
.n2{--y:95px;--t:150s;--dl:-110s}
.n3{--y:210px;--t:240s;--dl:-20s;opacity:.85}
@keyframes nuvem{from{transform:translate(-260px,var(--y))}to{transform:translate(1720px,var(--y))}}
.hero.chuva .nuvem ellipse{fill:#9AA6AF}

.passaro{fill:none;stroke:#26352B;stroke-width:2.2;stroke-linecap:round;opacity:0;animation:voo 46s linear infinite}
.p1{--y0:250px;animation-delay:6s}
.p2{--y0:270px;animation-delay:7.4s}
.p3{--y0:235px;animation-delay:8.1s}
@keyframes voo{0%{transform:translate(-80px,var(--y0));opacity:0}2%{opacity:.75}22%{opacity:.75}24%{transform:translate(1500px,calc(var(--y0) - 90px));opacity:0}100%{transform:translate(1500px,calc(var(--y0) - 90px));opacity:0}}
.hero.e-noite .passaro{display:none}

.fio{fill:none;stroke:#6B5A44;stroke-width:1.6}
.bandeira{stroke:rgba(0,0,0,.08);stroke-width:.6;transform-box:fill-box;transform-origin:50% 0;animation:balanca 3.2s ease-in-out infinite}
@keyframes balanca{50%{transform:rotate(6deg)}}

/* camadas: entram de baixo ao carregar (translate) e fazem paralaxe ao rolar (transform) */
.serra{fill:var(--serra)}.serra-2{fill:var(--serra-2)}
.morro-medio{fill:var(--morro-medio)}
.araucarias use{fill:var(--arauc);color:var(--arauc)}
.morro-perto{fill:var(--morro-perto)}
.estrada{fill:var(--estrada)}
.rota{fill:none;stroke:none}
.chao{fill:var(--chao)}
.capim{fill:none;stroke:var(--capim);stroke-width:2.4;stroke-linecap:round}
.parede{fill:var(--parede)}.telhado{fill:var(--telhado)}.porta{fill:var(--porta)}.porta-igreja{fill:var(--porta)}
.janela{fill:var(--janela-dia)}
.cruz{fill:none;stroke:var(--ipe);stroke-width:2.6;stroke-linecap:round}
.tronco{fill:none;stroke:var(--tronco);stroke-width:5;stroke-linecap:round}
.copa{fill:var(--copa);transition:fill 1s}
.hero.florada .copa{fill:#F0C02C}
.hero.florada .copa:nth-child(odd){fill:#F6CF4A}
.cerca rect{fill:var(--tronco)}.cerca path{fill:none;stroke:#5B4630;stroke-width:1.2}
.poste-haste{fill:#5A5048}
.ipe{transform-box:fill-box;transform-origin:50% 100%}
.js .ipe{animation:brisa 7s ease-in-out infinite}
@keyframes brisa{50%{transform:rotate(1.4deg)}}

.camada{transform:translateY(calc(var(--rol) * var(--k) * 1px))}
.c1{--k:.42}.c2{--k:.28}.c3{--k:.14}.c4{--k:0}
.js .camada{translate:0 70px;opacity:0;transition:translate 1.3s var(--mola),opacity 1s}
.js .hero.pronta .camada{translate:0 0;opacity:1}
.js .hero.pronta .c1{transition-delay:.05s}.js .hero.pronta .c2{transition-delay:.18s}.js .hero.pronta .c3{transition-delay:.3s}.js .hero.pronta .c4{transition-delay:.42s}

.noite{fill:#0A1531;opacity:calc(var(--noite) * .62);pointer-events:none;transition:opacity 2.4s}
.luzes rect,.luzes circle{fill:var(--luz);opacity:var(--luzes);filter:drop-shadow(0 0 6px var(--luz));transition:opacity 2s}
.luzes .poste{filter:drop-shadow(0 0 10px var(--luz))}

/* placa marrom de atrativo turístico */
.placa-fundo{fill:var(--placa)}
.placa-borda{fill:none;stroke:#FFFFFF;stroke-width:2.2}
.madeira{fill:var(--madeira)}
.placa-icone rect,.placa-icone path{fill:#fff}
.placa-icone path:last-child{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.placa-nome{font-family:var(--f-titulo);font-size:21px;fill:#fff;letter-spacing:.2px}
.placa-sub{font-family:var(--f-texto);font-size:11.5px;fill:rgba(255,255,255,.88);letter-spacing:.6px}
.placa{transform-box:fill-box;transform-origin:50% 100%;filter:brightness(calc(1 - var(--noite) * .3))}
.js .placa{scale:.86;rotate:-4deg;opacity:0;transition:scale .9s cubic-bezier(.3,1.6,.4,1) .75s,rotate 1.1s cubic-bezier(.3,1.8,.4,1) .75s,opacity .4s .75s}
.js .hero.pronta .placa{scale:1;rotate:0deg;opacity:1}

/* ônibus 141 (desenhado pelo cena.js) */
.onibus{cursor:pointer;pointer-events:auto}
.bus-sombra{fill:#000;opacity:.22}
.bus-teto{fill:#E6E3D8}
.bus-lado{fill:#F7F4EA;stroke:#2B3A2F;stroke-width:.8;stroke-linejoin:round}
.bus-face{fill:#FFFFFF;stroke:#2B3A2F;stroke-width:.8;stroke-linejoin:round}
.bus-faixa{fill:var(--janela)}
.bus-janela{fill:#5D7A93}
.bus-vidro{fill:#4E6B85}
.de-frente .bus-vidro{fill:#6F8EAA}
.bus-letreiro{fill:#1E2A24}
.bus-num{fill:#FFB23E;font-family:var(--f-num);font-weight:500;text-anchor:middle}
.bus-roda{fill:#1F2622}
.bus-luz{fill:#D9352B;filter:drop-shadow(0 0 calc(var(--luzes) * 5px) #FF4A3A)}
.de-frente .bus-luz{fill:#FFF3C4;filter:drop-shadow(0 0 calc(var(--luzes) * 8px) #FFE08A)}
.bus-facho{fill:#FFE9A6;opacity:calc(var(--luzes) * .32);filter:blur(3px)}
.bus-luzes{pointer-events:none}
.bus-buzina{font-family:var(--f-titulo);fill:#13261A;paint-order:stroke;stroke:#fff;stroke-width:3px;text-anchor:middle}
.fumaca{fill:#6E6E6A}
.e-noite .fumaca{fill:#B8BCC6}
.poeira{fill:#CDA67A}

/* texto do topo */
.hero-texto{position:absolute;left:0;right:0;top:clamp(26px,5vh,64px);color:var(--hero-tinta);transition:color 2s;pointer-events:none}
.hero-data{font-size:.95rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hero-tinta-2);transition:color 2s}
.saudacao{font-family:var(--f-titulo);font-size:clamp(2.7rem,9.6vw,5.6rem);line-height:.98;letter-spacing:-.02em;margin-top:6px;text-wrap:balance;max-width:12ch}
.saudacao em{font-style:normal;color:var(--hero-acento);transition:color 2s}
.hero-sol{margin-top:12px;font-size:1rem;color:var(--hero-tinta-2);display:flex;align-items:center;gap:8px;transition:color 2s}
.js .hero-texto > *{opacity:0;translate:0 18px;transition:opacity .9s,translate .9s var(--mola),color 2s}
.js .hero.pronta .hero-texto > *{opacity:1;translate:0 0}
.js .hero.pronta .hero-data{transition-delay:.25s,.25s,0s}
.js .hero.pronta .saudacao{transition-delay:.4s,.4s,0s}
.js .hero.pronta .hero-sol{transition-delay:.6s,.6s,0s}

/* ================= AGORA NO BAIRRO ================= */
.agora{position:relative;z-index:3;margin-top:-78px}
.agora-cartao{display:grid;grid-template-columns:1.25fr 1fr 1fr;background:var(--papel-vidro);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid color-mix(in srgb,var(--linha) 70%,transparent);border-radius:24px;box-shadow:var(--sombra-alta);overflow:hidden}
.agora-item{display:flex;flex-direction:column;gap:4px;padding:20px 22px;min-width:0;color:inherit;text-decoration:none;position:relative}
.agora-item + .agora-item{border-left:1px solid var(--linha)}
a.agora-item:hover{background:color-mix(in srgb,var(--janela-claro) 60%,transparent)}
.agora-rotulo{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.agora-rotulo svg{width:20px;height:20px;color:var(--janela)}
.agora-valor{font-family:var(--f-titulo);font-size:1.75rem;line-height:1.15;display:flex;align-items:center;gap:10px}
.agora-valor.num{font-family:var(--f-num);font-size:2.1rem;letter-spacing:-.02em}
.agora-sub{font-size:.95rem;color:var(--tinta-2)}
.trilho{display:block;height:6px;border-radius:9px;background:var(--anil-claro);margin-top:8px;overflow:hidden}
.trilho-ponto{display:block;height:100%;width:calc(var(--p,0) * 1%);border-radius:9px;background:linear-gradient(90deg,var(--anil),var(--janela));transition:width 1.4s var(--mola) 1s}
.lua-icone{width:30px;height:30px;flex:none}
.li-disco{fill:#2B3756;stroke:color-mix(in srgb,var(--tinta) 25%,transparent);stroke-width:.8}
.li-luz{fill:#F4EED6}
.agora-item.alerta-ativo .agora-valor{color:var(--perigo)}
.ponto-ok{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent);animation:pulso 2.4s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.js .agora-cartao{opacity:0;translate:0 40px;transition:opacity .9s .9s,translate 1.1s var(--mola) .9s}
.js .agora-cartao.pronto{opacity:1;translate:0 0}

.alertas{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.alerta{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--anil);background:var(--anil-claro);border-radius:16px;padding:14px 16px}
.alerta .nivel{flex:none;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:3px 8px;margin-top:3px;background:var(--anil);color:var(--papel)}
.alerta b{display:block;font-size:1.05rem}
.alerta span.txt{font-size:.95rem}
.alerta.perigo_potencial{border-color:var(--ipe);background:var(--ipe-claro)}.alerta.perigo_potencial .nivel{background:var(--ipe);color:#1b1b1b}
.alerta.perigo{border-color:var(--laranja);background:var(--laranja-claro)}.alerta.perigo .nivel{background:var(--laranja);color:#fff}
.alerta.grande_perigo{border-color:var(--perigo);background:var(--perigo-claro)}.alerta.grande_perigo .nivel{background:var(--perigo);color:#fff}

/* ================= ATALHOS ================= */
.atalhos-sec{margin-top:26px}
.atalhos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.atalho{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--papel);border:1px solid var(--linha);border-radius:20px;padding:18px;text-decoration:none;color:inherit;box-shadow:var(--sombra);transition:transform .35s var(--mola),box-shadow .35s,border-color .3s,opacity .7s,translate .7s var(--mola)}
.atalho:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:color-mix(in srgb,var(--janela) 40%,var(--linha))}
.atalho-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--janela-claro);color:var(--janela);margin-bottom:6px;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.atalho:hover .atalho-ic{transform:rotate(-8deg) scale(1.08)}
.atalho-ic svg{width:28px;height:28px}
.atalho b{font-family:var(--f-titulo);font-weight:400;font-size:1.18rem;line-height:1.2}
.atalho > span:last-child{font-size:.9rem;color:var(--tinta-2)}
.atalho:nth-child(2) .atalho-ic{background:var(--ipe-claro);color:#8A5E00}
.atalho:nth-child(3) .atalho-ic{background:var(--anil-claro);color:var(--anil)}
.atalho:nth-child(4) .atalho-ic{background:var(--perigo-claro);color:var(--perigo)}
@media (prefers-color-scheme:dark){.atalho:nth-child(2) .atalho-ic{color:var(--ipe)}}

/* ================= SEÇÕES ================= */
.secao{padding-block:clamp(56px,9vw,104px) 0;display:flex;flex-direction:column;gap:18px}
.secao-cab{display:flex;flex-direction:column;gap:8px;max-width:640px}
.sobretitulo{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--barro);display:flex;align-items:center;gap:10px}
.sobretitulo::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
.secao h2{font-size:clamp(2.1rem,5.4vw,3.3rem)}
.secao-sub{color:var(--tinta-2);font-size:1.05rem}
.sub-h{font-size:1.5rem;margin-top:18px}
.nota{color:var(--tinta-2);font-size:.92rem}

/* revelar ao rolar (só com JS; sem JS tudo aparece) */
.js .revela{opacity:0;translate:0 28px;transition:opacity .8s ease,translate .9s var(--mola)}
.js .revela.visto{opacity:1;translate:0 0}

/* ================= VITRINE ================= */
.busca-caixa{position:relative}
.busca-caixa svg{position:absolute;left:16px;top:50%;width:22px;height:22px;translate:0 -50%;color:var(--tinta-2);pointer-events:none}
.busca{width:100%;padding:16px 16px 16px 50px;border:1.5px solid var(--linha);border-radius:16px;background:var(--papel);font-size:1.05rem;box-shadow:var(--sombra);transition:border-color .2s,box-shadow .2s}
.busca:focus{outline:none;border-color:var(--janela);box-shadow:0 0 0 4px color-mix(in srgb,var(--janela) 18%,transparent)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;margin-inline:-2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1.5px solid var(--linha);background:var(--papel);border-radius:999px;padding:9px 16px;cursor:pointer;font-size:.95rem;transition:background .25s,color .25s,border-color .25s,transform .2s}
.chip:hover{border-color:var(--janela)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--janela);border-color:var(--janela);color:var(--sobre-janela)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:var(--papel);border:1px solid var(--linha);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;text-align:left;cursor:pointer;padding:0;box-shadow:var(--sombra);transition:transform .4s var(--mola),box-shadow .4s,opacity .7s,translate .7s var(--mola)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)}
.card-foto{position:relative;overflow:hidden;aspect-ratio:16/10}
.foto{width:100%;height:100%;object-fit:cover;display:block;background:#DCE7EE;transition:transform .8s var(--mola)}
.card:hover .foto{transform:scale(1.06)}
.selo-cat{position:absolute;left:12px;top:12px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--papel-vidro);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--tinta);border-radius:999px;padding:5px 11px}
.aviso-indicacoes{font-size:.95rem;color:var(--tinta-2);background:var(--ipe-claro);border-radius:14px;padding:11px 14px}
.card.compacto{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;border-radius:18px}
.card.compacto .corpo{padding:0;gap:2px}
.card.compacto h3{font-size:1.15rem}
.card.compacto .desc{font-size:.9rem}
.linha-cat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip-ind{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--ipe-claro);color:#7A5200;border-radius:999px;padding:2px 8px}
@media (prefers-color-scheme:dark){.chip-ind{color:var(--ipe)}}
.inicial{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;font-family:var(--f-titulo);font-size:1.6rem;color:#fff}
.cor0{background:#2F6B47}.cor1{background:#2D4B8E}.cor2{background:#9A5A34}.cor3{background:#B07A10}.cor4{background:#5C7A3A}.cor5{background:#7A4A6E}
.card.compacto:hover .inicial{transform:rotate(-6deg) scale(1.05)}
.inicial{transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.selo-indicacao{position:absolute;right:12px;bottom:12px;font-size:.74rem;font-weight:700;background:var(--ipe);color:#1b1b1b;border-radius:999px;padding:5px 11px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.nota-indicacao{background:var(--ipe-claro);border:1.5px solid color-mix(in srgb,var(--ipe) 60%,transparent);border-radius:14px;padding:12px 14px;font-size:.95rem;line-height:1.5}
.nota-indicacao b{display:block;margin-bottom:2px}
.card .corpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card h3{font-size:1.3rem}
.card .desc{font-size:.95rem;color:var(--tinta-2)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tag{font-size:.8rem;background:var(--janela-claro);color:var(--tinta);border-radius:999px;padding:3px 10px}
.paisagem .p-ceu{fill:#DCE7EE}.paisagem .p-sol{fill:#F0C02C}.paisagem .p-morro1{fill:#8DB27A}.paisagem .p-morro2{fill:#4E7A55}

.vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 20px 30px;border:2px dashed var(--linha);border-radius:24px;background:var(--papel)}
.barraca{width:min(240px,70%);height:auto;margin-bottom:6px}
.js .vazio.visto .barraca{animation:pula 1.2s cubic-bezier(.3,1.6,.5,1) .3s both}
@keyframes pula{0%{transform:translateY(16px) scale(.94)}100%{transform:none}}
.b-toldo{fill:#C94F2E}.b-listra{fill:#FFFFFF}.b-listra2{fill:#C94F2E}.b-poste{fill:#7A5534}.b-mesa{fill:#9A6B3F}
.b-fruta1{fill:#E39A2B}.b-fruta2{fill:#C9402A}.b-caixa{fill:#B98A55}.b-ovo{fill:#F6EBD3}
.vazio-titulo{font-family:var(--f-titulo);font-size:1.5rem}
.vazio-sub{color:var(--tinta-2);margin-bottom:8px}

.convite{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(120deg,var(--janela-forte),var(--janela));color:#fff;border-radius:24px;padding:26px 28px;box-shadow:var(--sombra-alta);position:relative;overflow:hidden}
@media (prefers-color-scheme:dark){.convite{background:linear-gradient(120deg,#1E4A33,#285E40)}}
.convite::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(240,192,44,.45),transparent 70%)}
.convite > div{max-width:560px;display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.convite h3{font-size:1.55rem}
.convite p{opacity:.92}
.convite .btn{background:#FFFFFF;color:#174A30;border-color:#FFFFFF;position:relative;z-index:1}

/* ficha (folha que sobe) */
.veu{position:fixed;inset:0;background:var(--veu);display:flex;align-items:flex-end;justify-content:center;z-index:60;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ficha{background:var(--papel);width:100%;max-width:640px;max-height:92%;overflow-y:auto;border-radius:26px 26px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));box-shadow:var(--sombra-alta)}
.ficha .corpo{display:flex;flex-direction:column;gap:14px;padding-block:18px 4px}
.ficha h2{font-size:2rem}
.galeria{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.galeria::-webkit-scrollbar{display:none}
.galeria img,.galeria svg{flex:none;width:86%;max-width:540px;aspect-ratio:4/3;object-fit:cover;border-radius:16px;scroll-snap-align:start}
.galeria > :only-child{width:100%}
.fechar{position:sticky;top:0;display:flex;justify-content:center;padding:10px 12px 6px;background:var(--papel);z-index:1}
.fechar::before{content:"";position:absolute;top:8px;width:44px;height:5px;border-radius:9px;background:var(--linha)}
.fechar button{margin-left:auto;margin-top:8px;border:1px solid var(--linha);background:var(--papel);border-radius:999px;padding:7px 16px;cursor:pointer}
.cat{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--barro);font-weight:700}
dl.info{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;background:var(--cal);border-radius:14px;padding:14px 16px}
dl.info dt{color:var(--tinta-2);font-size:.9rem}
dl.info dd{margin:0;min-width:0;overflow-wrap:anywhere}
.descricao{white-space:pre-line;font-size:1.05rem}
@media (prefers-reduced-motion:no-preference){
  .ficha{animation:sobe .55s cubic-bezier(.2,1.25,.35,1)}
  @keyframes sobe{from{transform:translateY(100%)}to{transform:none}}
}

/* ================= ÔNIBUS ================= */
.bus-prox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bus-bloco{display:flex;flex-direction:column;gap:4px;background:var(--papel);border:1px solid var(--linha);border-radius:20px;padding:20px 22px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.bus-bloco::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--anil)}
.bus-bloco + .bus-bloco::before{background:var(--janela)}
.bus-rotulo{font-size:.9rem;color:var(--tinta-2)}
.bus-hora{font-size:clamp(2.4rem,7vw,3.4rem);line-height:1.05;letter-spacing:-.03em}
.bus-falta{font-weight:700;color:var(--janela)}
.linha-dia{display:flex;flex-direction:column;gap:22px;background:var(--papel);border:1px solid var(--linha);border-radius:20px;padding:22px;box-shadow:var(--sombra)}
.ld-linha{display:flex;flex-direction:column;gap:10px}
.ld-titulo{font-weight:700;font-size:.95rem}
.ld-trilho{position:relative;height:26px}
.ld-trilho::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;translate:0 -50%;border-radius:9px;background:repeating-linear-gradient(90deg,var(--linha) 0 10px,transparent 10px 16px)}
.ld-feito{position:absolute;left:0;top:50%;height:4px;translate:0 -50%;border-radius:9px;background:var(--anil);width:calc(var(--x) * 1%);transition:width 1.6s var(--mola)}
.ld-marco{position:absolute;top:50%;left:calc(var(--x) * 1%);width:14px;height:14px;translate:-50% -50%;border-radius:50%;background:var(--papel);border:3px solid var(--anil)}
.ld-marco.passou{background:var(--anil);opacity:.45}
.ld-marco.proximo{border-color:var(--janela);background:var(--janela);box-shadow:0 0 0 0 color-mix(in srgb,var(--janela) 55%,transparent);animation:pulso 2s infinite}
.ld-agora{position:absolute;top:-4px;bottom:-4px;left:calc(var(--x) * 1%);width:2px;background:var(--perigo);border-radius:2px}
.ld-linha:first-child .ld-agora::after{content:"agora";position:absolute;top:-20px;left:50%;translate:-50% 0;font-size:.7rem;font-weight:700;color:var(--perigo);letter-spacing:.06em;text-transform:uppercase}
.ld-horas{display:flex;flex-wrap:wrap;gap:8px}
.ld-hora{font-family:var(--f-num);font-size:.95rem;border-radius:10px;padding:5px 11px;background:var(--anil-claro)}
.ld-hora.passou{opacity:.45;text-decoration:line-through;text-decoration-thickness:1px}
.ld-hora.proximo{background:var(--janela);color:var(--sobre-janela);font-weight:500}
.ld-eixo{display:flex;justify-content:space-between;font-family:var(--f-num);font-size:.75rem;color:var(--tinta-2)}

/* ================= TELEFONES ================= */
.fones{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.fones-emerg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fone{display:flex;flex-direction:column;gap:2px;background:var(--papel);border:1px solid var(--linha);border-radius:16px;padding:14px 16px;box-shadow:var(--sombra)}
.fone b{font-family:var(--f-num);font-size:1.2rem;font-weight:500;white-space:nowrap}
.fone span{font-size:.9rem;color:var(--tinta-2)}
.fones-emerg .fone b{font-size:1.9rem;color:var(--perigo)}

.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.app{display:flex;align-items:center;gap:14px;background:var(--papel);border:1px solid var(--linha);border-radius:18px;padding:14px 16px;text-decoration:none;color:inherit;box-shadow:var(--sombra);transition:transform .3s var(--mola),box-shadow .3s,opacity .7s,translate .7s var(--mola)}
.app:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}
.app-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px}
.app-ic svg{width:26px;height:26px}
.app-luz{background:var(--ipe-claro);color:#8A5E00}
.app-pref{background:var(--anil-claro);color:var(--anil)}
.app-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.app-txt b{font-family:var(--f-titulo);font-weight:400;font-size:1.12rem}
.app-txt span{font-size:.88rem;color:var(--tinta-2)}
.app-abrir{flex:none;font-weight:700;font-size:.9rem;color:var(--janela);background:var(--janela-claro);border-radius:999px;padding:7px 14px}
@media (prefers-color-scheme:dark){.app-luz{color:var(--ipe)}}

/* ================= RODAPÉ ================= */
.rodape-noite{margin-top:clamp(70px,10vw,120px);background:linear-gradient(#24365C,#0E1832);color:#E9ECF4;padding-bottom:140px}
.rodape-cena{display:block;width:100%;height:110px;background:linear-gradient(var(--cal),var(--cal) 0%,transparent);margin-top:-1px}
.rn-serra{fill:#2E4470}.rn-morro{fill:#1B2A4D}.rn-estrelas circle{fill:#FFF5DA}
.rodape-noite{background:#0E1832}
.rodape-cena{background:linear-gradient(180deg,var(--cal) 0%,#24365C 100%)}
.rodape-texto{display:flex;flex-direction:column;gap:8px;padding-top:24px}
.rodape-marca{font-family:var(--f-titulo);font-size:1.8rem;color:#fff}
.rodape-noite a{color:#F0C02C}

/* ================= NAVEGAÇÃO ================= */
.nav-flutua{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:min(540px,calc(100% - 20px));padding:6px;background:var(--papel-vidro);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid color-mix(in srgb,var(--linha) 80%,transparent);border-radius:22px;box-shadow:var(--sombra-alta)}
.nav-flutua a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:16px;text-decoration:none;color:var(--tinta-2);font-size:.82rem;font-weight:700;transition:background .3s,color .3s}
.nav-flutua svg{width:24px;height:24px}
.nav-flutua a[aria-current="true"]{background:var(--janela-claro);color:var(--janela)}
.nav-flutua a.nav-destaque{background:var(--janela);color:var(--sobre-janela)}
.js .nav-flutua{translate:-50% 140%;transition:translate .8s var(--mola) 1.4s}
.js .nav-flutua.pronta{translate:-50% 0}

.barra{position:fixed;left:0;right:0;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);background:var(--papel-vidro);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha);translate:0 -110%;transition:translate .5s var(--mola)}
.barra.mostrar{translate:0 0}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.marca{text-decoration:none}
.placa-mini{display:inline-flex;align-items:center;font-family:var(--f-titulo);font-size:1.15rem;color:#fff;background:#6B4226;border-radius:7px;padding:5px 13px;box-shadow:inset 0 0 0 2px #6B4226,inset 0 0 0 3.5px #fff;text-decoration:none}

/* ================= PÁGINAS INTERNAS (cadastro, privacidade) ================= */
.topo-mini{position:relative;background:linear-gradient(#A9CDE6,#DDEBEF);overflow:hidden}
.topo-mini-in{display:flex;align-items:center;gap:14px;padding-block:22px 64px;position:relative;z-index:1;color:#13261A}
.topo-mini-in p{font-weight:700;font-size:.95rem}
.topo-mini svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:70px}
.tm-serra{fill:#A7BEC6}.tm-morro{fill:#6D9A60}.tm-chao{fill:#3C6838}
.pagina{display:flex;flex-direction:column;gap:20px;padding-block:28px 140px}
.pagina > .bloco h2{font-size:clamp(2rem,6vw,2.8rem)}
.bloco{display:flex;flex-direction:column;gap:10px}
form.cadastro{display:flex;flex-direction:column;gap:18px}
fieldset{border:1px solid var(--linha);border-radius:20px;padding:18px;margin:0;display:flex;flex-direction:column;gap:14px;background:var(--papel);min-width:0;box-shadow:var(--sombra)}
legend{font-family:var(--f-titulo);font-size:1.25rem;padding:0 8px}
label.campo,div.campo{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:1rem}
label.campo .ajuda{font-weight:400;color:var(--tinta-2);font-size:.88rem}
label.campo input,label.campo select,label.campo textarea{font-weight:400;padding:13px 14px;border:1.5px solid var(--linha);border-radius:12px;background:var(--cal);font-size:1.05rem;width:100%;transition:border-color .2s,box-shadow .2s}
label.campo input:focus,label.campo select:focus,label.campo textarea:focus{outline:none;border-color:var(--janela);box-shadow:0 0 0 4px color-mix(in srgb,var(--janela) 16%,transparent)}
label.campo textarea{min-height:130px;resize:vertical}
.campo.erro input,.campo.erro select,.campo.erro textarea{border-color:var(--perigo)}
.msg-erro{color:var(--perigo);font-weight:400;font-size:.9rem}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;font-weight:400}
.check input{margin-top:3px;width:22px;height:22px;flex:none;accent-color:var(--janela)}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px}
.etiquetas label{display:flex;gap:8px;align-items:center;border:1.5px solid var(--linha);border-radius:999px;padding:8px 14px;font-size:.95rem;font-weight:400;background:var(--cal);cursor:pointer;transition:border-color .2s,background .2s}
.etiquetas label:has(input:checked){border-color:var(--janela);background:var(--janela-claro)}
.etiquetas input{accent-color:var(--janela);width:18px;height:18px}
.miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.miniaturas img{aspect-ratio:1;object-fit:cover;border-radius:12px;width:100%;animation:entra .4s var(--mola)}
@keyframes entra{from{opacity:0;transform:scale(.9)}}
.aviso-ok{background:var(--janela-claro);border:1.5px solid var(--janela);border-radius:16px;padding:16px;font-weight:700}
.aviso-erro{background:var(--perigo-claro);border:1.5px solid var(--perigo);border-radius:16px;padding:16px}
.isca{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.texto-longo{max-width:68ch;display:flex;flex-direction:column;gap:14px}
.texto-longo h2{font-size:2rem;margin-top:10px}
.texto-longo h3{font-size:1.35rem;margin-top:6px}
.texto-longo ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.rodape{padding-block:24px;font-size:.92rem;color:var(--tinta-2);display:flex;gap:16px;flex-wrap:wrap}

/* ================= TELAS ================= */
@media (max-width:860px){
  .atalhos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agora-cartao{grid-template-columns:1fr 1fr}
  .agora-item:first-child{grid-column:1/-1}
  .agora-item + .agora-item{border-left:0;border-top:1px solid var(--linha)}
  .agora-item:nth-child(3){border-left:1px solid var(--linha)}
}
@media (max-width:520px){
  body{font-size:17px}
  .agora{margin-top:-64px}
  .agora-item{padding:15px 15px}
  .agora-valor{font-size:1.12rem;gap:7px}
  .agora-valor.num{font-size:1.9rem}
  .agora-sub{font-size:.84rem}
  .agora-rotulo{font-size:.74rem}
  .lua-icone{width:22px;height:22px}
  .bus-prox{grid-template-columns:1fr}
  .btns{grid-template-columns:1fr}
  .atalho{padding:15px;border-radius:18px}
  .atalho b{font-size:1.06rem}
  .convite{padding:22px}
}

/* menos movimento: tudo parado e visível */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .revela,.js .camada,.js .placa,.js .hero-texto > *,.js .agora-cartao,.js .nav-flutua{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}
  .js .nav-flutua{translate:-50% 0!important}
  .js .hero:not(.pronta) .astro{opacity:1}
  .camada{transform:none}
  .nuvem{transform:translate(var(--x0,300px),var(--y))}
  .n1{--x0:240px}.n2{--x0:980px}.n3{--x0:620px}
  .passaro{display:none}
}