:root{
  --black:#0A0A0A; --graphite:#161716; --steel:#2A2C2B; --concrete:#8D908E; --cement:#C4C6C4; --fog:#ECEDEB; --white:#FFFFFF;
  --muted:#5F6261; --line:#D3D5D3;
  --font:"Manrope","Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(20px,4.4vw,64px);
  --max:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
body{background:var(--fog);color:var(--graphite);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit;color:inherit}
ul,ol{list-style:none;padding:0}
img,video,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto}
section{padding:clamp(72px,10vw,140px) var(--pad)}

/* fundo das seções: grão fino. Fica atrás do conteúdo (isolation) e some sob qualquer cartão ou imagem. */
section{position:relative;isolation:isolate}
section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media print{section::before{display:none}}
.label{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.muted{color:var(--muted)}
h1,h2,h3,h4{font-weight:inherit}
h2{font-weight:300;font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.04;letter-spacing:-.035em;color:var(--black);text-wrap:balance}
h2 b{font-weight:700}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--steel);max-width:58ch}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 48px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,60px)}
.head > p{max-width:48ch;color:var(--muted)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--black);background:transparent;color:var(--black);padding:14px 24px;font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--black);color:var(--white)}
.btn.dark{background:var(--black);color:var(--white)}
.btn.dark:hover{background:var(--steel);border-color:var(--steel)}
.btn.light{border-color:rgba(255,255,255,.7);color:var(--white)}
.btn.light:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.btn.fill{background:var(--white);border-color:var(--white);color:var(--black)}
.btn.fill:hover{background:var(--cement);border-color:var(--cement)}
.btn svg{width:17px;height:17px;flex:none}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* navegação */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--pad);color:var(--white);border-bottom:1px solid transparent;transition:background .35s,color .35s,padding .35s,border-color .35s}
.nav.solid{background:rgba(236,237,235,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--black);border-color:var(--line);padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;white-space:nowrap}
.brand svg{width:30px;height:auto}
.brand b{font-weight:300}
.nav .brand{font-size:1.12rem;gap:14px;transition:font-size .35s var(--ease),gap .35s var(--ease)}
.nav .brand svg{width:36px;transition:width .35s var(--ease)}
.nav:not(.solid) .brand{font-size:1.6rem;gap:16px}
.nav:not(.solid) .brand svg{width:54px}
@media (max-width:760px){.nav .brand{font-size:1.02rem}.nav .brand svg{width:32px}.nav:not(.solid) .brand{font-size:1.28rem;gap:12px}.nav:not(.solid) .brand svg{width:42px}}
.nav ul{display:flex;gap:28px}
/* cabeçalho: todos os itens no mesmo tamanho, peso e caixa (sem versalete) */
.nav ul,.nav .fav-nav,.nav .btn,.menu-btn{font-size:.86rem;font-weight:500;letter-spacing:0;text-transform:none}
.nav ul a{opacity:.82;transition:opacity .2s}
.nav ul a:hover{opacity:1}
.nav-right{display:flex;align-items:center;gap:16px}
.nav .btn{padding:10px 16px;border-color:currentColor;color:inherit}
.nav .btn:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.nav.solid .btn:hover{background:var(--black);border-color:var(--black);color:var(--white)}
.menu-btn{display:none;background:none;border:0;cursor:pointer;color:inherit;padding:8px 0}
.menu{position:fixed;inset:0;z-index:45;background:var(--black);color:var(--white);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--pad)}
.menu[hidden]{display:none}
.menu a{font-weight:300;font-size:clamp(2rem,9vw,3.2rem);letter-spacing:-.03em;line-height:1.2}
body.menu-open .nav{background:none;color:var(--white);border-color:transparent}
@media (max-width:1020px){.nav ul,.nav .btn{display:none}.menu-btn{display:block}}

/* whatsapp flutuante */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:40;width:56px;height:56px;border-radius:50%;background:#25D366;color:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.2);transform:translateY(100px);transition:transform .45s var(--ease)}
.wa-float.on{transform:none}
.wa-float svg{width:28px;height:28px}

/* filtros e lista */
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--line);background:none;padding:8px 14px;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--black)}
.chip[aria-pressed="true"]{background:var(--black);color:var(--white);border-color:var(--black)}
.chips .sep{width:1px;height:22px;background:var(--line);margin:0 6px}
.rows{border-top:1px solid var(--black);margin-top:22px}
.rows li{border-bottom:1px solid var(--line)}
.rows li[hidden]{display:none}
.row{display:grid;grid-template-columns:8.5rem minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) 5rem;gap:20px;align-items:center;padding:12px;margin:0 -12px;transition:background .25s}
.row:hover{background:var(--white)}
.row .th{width:8.5rem;aspect-ratio:3/2;overflow:hidden;background:var(--cement)}
.row .th img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.row:hover .th img{transform:scale(1.06)}
.row .nb{display:flex;flex-direction:column;gap:4px;min-width:0}
.row .sb{font-size:.92rem;color:var(--muted)}
.row .nm{font-weight:600;font-size:clamp(1.15rem,2vw,1.8rem);letter-spacing:.005em;text-transform:uppercase;color:var(--black);line-height:1.1}
.row .c{font-size:.92rem;color:var(--muted)}
.row .go{justify-self:end;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:8px}
.row .go i{font-style:normal;transition:transform .25s var(--ease)}
.row:hover .go i{transform:translateX(4px)}
.fase{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.fase i{width:7px;height:7px;background:currentColor;flex:none}
.fase[data-f="obras"] i{background:transparent;border:1px solid currentColor}
.fase[data-f="pronto"] i{border-radius:50%}
.note{margin-top:18px;font-size:.9rem;color:var(--muted)}
@media (max-width:900px){
  .row{grid-template-columns:5.5rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:6px;padding:12px}
  .row .th{width:5.5rem;grid-row:span 2;align-self:start}
  .row .nb{align-self:end}
  .row .fase{align-self:start}
  .row .c,.row .go{display:none}
}

/* rodapé */
footer{position:relative;background:var(--white);color:var(--graphite);padding:clamp(56px,8vw,100px) var(--pad) 0;overflow:hidden;border-top:1px solid var(--line)}
.f-top{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.f-brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.f-brand .brand{font-size:1.5rem;color:var(--black)}
.f-brand .brand svg{width:44px}
.f-brand p{color:var(--muted);max-width:34ch}
.social{display:flex;gap:12px}
.social a{width:40px;height:40px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,border-color .25s}
.social a:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.social svg{width:17px;height:17px}
.f-col h4{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--concrete);margin-bottom:18px}
.f-col li{margin-bottom:10px}
.f-col a{color:var(--black)}
.f-col a:hover{text-decoration:underline;text-underline-offset:4px}
.f-word{max-width:var(--max);margin:clamp(48px,7vw,90px) auto 0;font-size:clamp(2.6rem,12.4vw,11.6rem);line-height:.86;letter-spacing:-.055em;font-weight:600;color:var(--black);white-space:nowrap}
.f-word span{font-weight:200}
.f-city{position:relative;margin:0 calc(var(--pad) * -1);height:clamp(260px,36vw,520px)}
.f-city canvas{position:absolute;inset:0;width:100%;height:100%}
.f-legal{position:absolute;left:var(--pad);right:var(--pad);top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);z-index:1}
@media (max-width:860px){.f-top{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}

/* entrada suave */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}
html{scroll-behavior:smooth}
/* rodapé: contagem por cidade e região de cada número */
.f-col .f-n{margin-left:8px;font-size:.72rem;font-weight:600;color:var(--concrete);font-variant-numeric:tabular-nums}
.f-col .f-r{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
/* lista agrupada por cidade */
.rows li.grp{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:clamp(28px,4vw,44px) 0 12px;border-bottom:1px solid var(--black)}
.rows li.grp:first-child{padding-top:18px}
.rows li.grp h3{font-weight:600;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.025em;color:var(--black);line-height:1}
.rows li.grp h3 small{font-size:.5em;font-weight:600;letter-spacing:.16em;color:var(--muted);margin-left:10px;vertical-align:middle}
.rows li.grp .grp-n{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rows li.cut,.rows li.grp[hidden],.rows li.more[hidden]{display:none}
.rows li.more{border-bottom:0}
.rows li.more button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:16px 0;cursor:pointer;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--black);text-align:left}
.rows li.more button:hover{color:var(--muted)}
.rows li.more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}

/* laranja da marca BILD (bild.com.br, --color-bild-orange) */
:root{--bild:#ED7203}
.bild{color:var(--bild)}

/* grão só nas seções cinza; as brancas ficam limpas e o ritmo alterna */
section[style*="var(--white)"]::before,section.clean::before{display:none}

/* favoritos */
.fav{position:absolute;z-index:3;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--black);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .25s var(--ease),background .2s,color .2s}
.fav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;transition:fill .2s}
.fav:hover{transform:scale(1.08)}
.fav[aria-pressed="true"]{background:var(--bild);color:var(--white)}
.fav[aria-pressed="true"] svg{fill:currentColor}
.fav.pop{animation:favPop .45s var(--ease)}
@keyframes favPop{40%{transform:scale(1.28)}100%{transform:none}}
.rows li[data-i],.dest-list li{position:relative}
.rows .fav{left:6px;top:18px;width:30px;height:30px}
.rows .fav svg{width:15px;height:15px}
.dest-list .fav{right:14px;top:14px}
.btn.fav-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.btn.fav-b[aria-pressed="true"]{background:var(--bild);border-color:var(--bild);color:var(--white)}
.btn.fav-b[aria-pressed="true"] svg{fill:currentColor}
.fav-nav{position:relative;display:flex;align-items:center;gap:8px;background:none;border:0;color:inherit;cursor:pointer;padding:8px 2px;font:inherit;opacity:.82;transition:opacity .2s}
.fav-nav:hover{opacity:1}
.fav-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.fav-nav .n{position:absolute;left:11px;top:-1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bild);color:var(--white);font-size:.62rem;letter-spacing:0;display:grid;place-items:center}
.fav-nav .n[hidden]{display:none}
.fav-nav.pop .n{animation:favPop .45s var(--ease)}
.fav-nav .t{margin-left:4px}
@media (max-width:1020px){.fav-nav .t{display:none}}
.fav-panel{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;background:rgba(10,10,10,.42);opacity:0;pointer-events:none;transition:opacity .3s}
.fav-panel.open{opacity:1;pointer-events:auto}
.fav-panel .box{width:min(440px,100%);height:100%;background:var(--fog);color:var(--black);display:flex;flex-direction:column;transform:translateX(30px);transition:transform .4s var(--ease)}
.fav-panel.open .box{transform:none}
.fav-panel .hd{display:flex;justify-content:space-between;align-items:baseline;padding:26px 28px 18px;border-bottom:1px solid var(--black)}
.fav-panel h2{font-weight:300;font-size:1.9rem;letter-spacing:-.04em}
.fav-panel h2 b{font-weight:700}
.fav-panel .x{background:none;border:0;cursor:pointer;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--black)}
.fav-panel ul{flex:1;overflow:auto;padding:0 28px}
.fav-panel li{display:grid;grid-template-columns:5rem minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.fav-panel li img{width:5rem;aspect-ratio:3/2;object-fit:cover;background:var(--cement)}
.fav-panel li a{display:flex;flex-direction:column;gap:3px;min-width:0}
.fav-panel li b{font-weight:600;text-transform:uppercase;font-size:.98rem}
.fav-panel li small{font-size:.8rem;color:var(--muted)}
.fav-panel li button{background:none;border:0;cursor:pointer;color:var(--muted);font-size:1.3rem;line-height:1;padding:6px}
.fav-panel li button:hover{color:var(--black)}
.fav-panel .empty{padding:28px;color:var(--muted);line-height:1.6}
.fav-panel .ft{padding:20px 28px 26px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.fav-panel .ft p{font-size:.86rem;color:var(--muted)}
.fav-panel .ft .btn{width:100%}
.fav-panel .ft .clr{background:none;border:0;cursor:pointer;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);align-self:center}
body.fav-open{overflow:hidden}