:root{color-scheme:light;--ink:#24463e;--muted:#6b8179;--paper:#fffcf4;--orange:#cf6945;--line:rgba(42,75,64,.14);--shadow:0 12px 40px #37594b14;--green:#315e4c}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"DM Sans",sans-serif;color:var(--ink);background:#d9ebea}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #cf6945;outline-offset:4px}button:disabled{cursor:default}button,input{color:inherit}[hidden]{display:none!important}#app{position:relative;isolation:isolate;background:radial-gradient(ellipse at 40% 25%,#f2f4e9,#d9ebea 65%)}#scene{position:absolute;inset:0}#scene canvas{display:block;outline:none;touch-action:none;cursor:grab}#scene canvas:active{cursor:grabbing}
.topbar{position:absolute;inset:0 0 auto;z-index:5;height:100px;padding:25px 36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand,.counter{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;border:0;background:none;text-align:left;padding:0}.brand-mark{display:grid;place-items:center;width:45px;height:45px;border:1px solid #36594a25;background:#fffcf4;border-radius:50%;color:#426c53;box-shadow:0 3px 10px #355e4310}.brand-mark svg{width:26px}.brand strong,.brand small{display:block}.brand strong{font:800 16px "Manrope",sans-serif;letter-spacing:-.04em}.brand small{font-size:10px;color:var(--muted);margin-top:4px}.counter{display:flex;gap:12px;align-items:center;background:#fffcf4d9;border:1px solid #fff8;padding:11px 17px;border-radius:16px;backdrop-filter:blur(18px);box-shadow:var(--shadow)}.counter-icon{display:grid;place-items:center;width:32px;height:32px;background:#e4ebdf;border-radius:50%}.counter-icon svg{width:20px}.counter strong,.counter small{display:block}.counter strong{font:800 23px/1 "Manrope";letter-spacing:-.05em}.counter small{font-size:10px;color:var(--muted);margin-top:4px}
.hero-copy{position:absolute;z-index:3;top:25%;left:40px;width:270px;transition:opacity .35s,transform .35s;pointer-events:none}.eyebrow{display:flex;gap:8px;align-items:center;margin:0 0 18px;color:#61796a;font-size:9px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;font-weight:700}.eyebrow span{width:5px;height:5px;border-radius:50%;background:var(--orange)}.hero-copy h1{margin:0;font:800 clamp(30px,3.1vw,48px)/1.12 "Manrope",sans-serif;letter-spacing:-.065em}.hero-copy h1 em{font-family:Georgia,serif;font-weight:400;color:#b96344;letter-spacing:-.055em}.hero-copy>p:not(.eyebrow){font-size:12px;line-height:1.8;color:#688075;margin:20px 0 22px}.explore-button{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:13px 16px;background:#315e4c;border:1px solid #315e4c;border-radius:10px;color:#fffcf4;font-size:11px;box-shadow:0 5px 12px #24463e14;pointer-events:auto}.explore-button:hover{background:#244c3c;transform:translateY(-1px)}.explore-button span{font-size:19px}.text-button{padding:13px 0;border:0;background:none;font-size:10px;color:#688075;pointer-events:auto}.text-button span{padding-left:10px}.community-caption{display:flex;align-items:center;gap:7px;margin-top:25px;font-size:9px;color:#6f847b}.community-caption i{width:5px;height:5px;background:#8caa81;border-radius:50%}.close-view .hero-copy{opacity:0;transform:translateX(-15px);pointer-events:none}.close-view .hero-copy button{pointer-events:none}
.search-panel{position:absolute;z-index:8;top:29px;left:50%;width:min(400px,34vw);transform:translateX(-50%)}.search-heading,.search-feedback{display:none}.search-box{display:flex;align-items:center;gap:10px;padding:5px 5px 5px 17px;background:#fffcf4f0;border:1px solid #fff;border-radius:13px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.search-box>svg{width:18px;flex:none;color:#789081}.search-box input{width:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;padding:10px 0;font-size:12px}.search-box:focus-within{box-shadow:0 0 0 2px #779e8744,var(--shadow)}.search-box input::placeholder{color:#87968c}.search-box button{display:grid;place-items:center;width:38px;height:38px;flex:none;border:0;border-radius:9px;background:#315e4c;color:white}.search-box button:hover{background:#47735a}.search-box button svg{width:17px}#search-form{position:relative}.suggestions{position:absolute;left:0;right:0;top:calc(100% + 8px);padding:6px;background:#fffcf4;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}.suggestion{display:flex;justify-content:space-between;align-items:center;width:100%;gap:10px;text-align:left;padding:13px 10px;border:0;border-radius:7px;background:none}.suggestion:hover{background:#eaf0e5}.suggestion strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}.suggestion span{font-size:9px;color:var(--muted);white-space:nowrap}
#geographic-labels{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}.state-label{position:absolute;left:0;top:0;pointer-events:auto;background:none;border:0;border-radius:4px;padding:3px 4px;white-space:nowrap;font:700 11px "DM Sans",sans-serif;color:#3b5149;letter-spacing:.015em;text-shadow:0 1px 2px #fff9,1px 0 2px #fff9,-1px 0 2px #fff9}.state-label:hover{background:#fffcf4cc;color:#183e2f}.ocean-label{position:absolute;left:77%;top:60%;z-index:1;text-align:center;color:#739b9e;font-size:10px;line-height:2;letter-spacing:.27em;opacity:.65;pointer-events:none}.close-view .ocean-label{display:none}.compass{position:absolute;right:40px;top:130px;display:flex;flex-direction:column;align-items:center;color:#6d8c80;pointer-events:none}.compass b{font-size:10px;font-weight:500;margin-bottom:5px}.compass svg{width:24px;height:31px}.atlas-key{position:absolute;z-index:4;left:36px;bottom:65px;width:370px;padding:15px 17px 12px;background:#fffcf4cc;border:1px solid #fff9;border-radius:14px;box-shadow:var(--shadow);backdrop-filter:blur(15px)}.key-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#7a897a;font-size:8px;font-weight:700;letter-spacing:.15em}.key-heading button{border:1px solid #7e958454;background:transparent;border-radius:50%;font-size:10px;width:19px;height:19px;padding:0}.region-key{display:flex;flex-wrap:wrap;gap:13px}.region-key button{display:flex;align-items:center;gap:5px;border:0;padding:0;background:none;font-size:10px;white-space:nowrap}.region-key i{display:block;width:8px;height:8px;background:var(--region);border-radius:2px}.region-key button:hover{text-decoration:underline}.layer-controls{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:11px;border-top:1px solid #63796915}.layer-controls button{padding:0;border:0;background:none;font-size:8px;color:#6d8173}.layer-controls button::before{content:"✓";margin-right:4px;color:#426b52}.layer-controls button[aria-pressed=false]{opacity:.5}.layer-controls button[aria-pressed=false]::before{content:"○"}.layer-controls>span{margin-left:auto;font-size:8px;color:#8b998d}.close-view .atlas-key{opacity:0;pointer-events:none;transform:translateY(10px)}.atlas-key{transition:opacity .25s,transform .25s}
.zoom-controls{position:absolute;z-index:6;right:35px;bottom:142px;display:grid;gap:7px}.zoom-controls button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #fff8;border-radius:12px;background:#fffcf4ed;box-shadow:0 5px 15px #355e4310;color:#426452;font:500 23px "DM Sans";backdrop-filter:blur(10px)}.zoom-controls button:hover{background:white;transform:translateY(-1px)}.zoom-controls svg{width:17px}.zoom-stage{position:absolute;right:35px;bottom:80px;display:flex;align-items:center;gap:7px;pointer-events:none}.zoom-stage i{width:5px;height:5px;border-radius:50%;background:#62896c}.zoom-stage small{display:block;font-size:7px;letter-spacing:.1em;color:#81958a;text-transform:uppercase}.zoom-stage strong{display:block;font-size:10px;margin-top:3px;font-weight:500}.map-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;color:#7e968a;font-size:9px;line-height:1.6;pointer-events:none}.map-hint br{display:none}.map-hint small{margin-left:8px;color:#8da095;font-size:9px}.mouse-icon{display:block;width:12px;height:18px;border:1px solid #8da095;border-radius:7px}.mouse-icon::before{content:"";display:block;width:2px;height:4px;margin:4px auto;background:#8da095;border-radius:1px}
.city-summary{position:absolute;left:36px;top:125px;z-index:6;width:300px;padding:21px;background:#fffcf4f5;border:1px solid white;border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(20px);animation:panelIn .3s ease}.city-summary-heading{display:flex;gap:10px;align-items:center}.city-rank{font-size:9px;color:#9b7641;padding:7px;background:#eee3c7;border-radius:7px;white-space:nowrap}.city-summary-heading small{color:#899383;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.city-summary h2{margin:4px 0 0;font:800 19px/1.2 "Manrope";letter-spacing:-.04em}.city-summary h2 em{display:inline;font-size:10px;font-style:normal;color:#8a9783;letter-spacing:.06em}.city-evolution{display:flex;align-items:center;justify-content:space-between;margin-top:19px;padding-top:15px;border-top:1px solid var(--line)}.city-evolution span{font:800 12px "Manrope"}.city-evolution button{border:0;background:#e7ecdf;border-radius:50%;width:24px;height:24px}.city-level-detail{font-size:10px;line-height:1.6;color:var(--muted);margin:7px 0 0}.city-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:15px}.city-metrics>span{border:1px solid #d9e0ce;background:#f3f4e9;padding:10px;border-radius:8px}.city-metrics strong,.city-metrics small{display:block}.city-metrics strong{font:800 20px "Manrope";letter-spacing:-.04em}.city-metrics small{font-size:8px;color:#7a8978;margin-top:2px}.city-founder{display:flex;gap:5px;flex-wrap:wrap;align-items:center;font-size:10px;padding:10px 0;margin:6px 0 0}.city-founder small{font-size:8px;color:#8b937f}.city-founder strong{font-size:10px;color:#b76744;overflow-wrap:anywhere}.city-progress{margin-top:7px}.city-progress-track{height:5px;border-radius:10px;background:#e6e9da;overflow:hidden}.city-progress-track i{height:100%;display:block;background:#c98d5c;border-radius:10px;transition:width .4s}.city-progress>small{display:block;color:#87917a;font-size:9px;line-height:1.5;margin-top:9px}
.resident-card{position:absolute;z-index:7;right:35px;top:125px;width:300px;display:grid;grid-template-columns:39px minmax(0,1fr);gap:10px;background:#fffcf4f5;padding:19px;border:1px solid white;border-radius:16px;box-shadow:var(--shadow);backdrop-filter:blur(18px);animation:panelIn .3s ease}.resident-avatar{display:grid;place-items:center;width:39px;height:39px;background:#eed9b9;border-radius:11px;color:#a0633e;font:800 18px "Manrope"}.resident-label{font-size:8px;color:#b0714c;letter-spacing:.025em}.resident-card h2{font:800 13px "Manrope";letter-spacing:-.02em;margin:5px 0;overflow-wrap:anywhere}.resident-card p{font-size:10px;color:var(--muted);margin:0}.resident-number{grid-column:1/-1;font-size:9px;color:#6f816e;background:#e9eddf;width:max-content;padding:5px 8px;border-radius:5px}.share-resident{grid-column:1/-1;border:0;border-radius:8px;padding:11px;background:#315e4c;color:#fffaf0;font-size:10px}.share-resident:hover{background:#47735a}.close-card{position:absolute;right:7px;top:4px;border:0;background:none;color:#91a18b;padding:3px 6px;font-size:20px}.close-card:hover{color:#315e4c}
/* Casa do YouTube (main.js, mostrarCasaNoCartao): selo vermelho no lugar do número da casa. */
.resident-number.is-youtube{background:#ff1a1a;color:#fff;font-weight:700}
footer{position:absolute;left:36px;right:35px;bottom:27px;z-index:3;display:flex;justify-content:space-between;font-size:9px;color:#7a9384;pointer-events:none}.footer-link{pointer-events:auto;color:inherit;text-decoration:none;padding:14px 10px;margin:-14px -10px}.footer-link:hover{color:#315e4c;text-decoration:underline}.live-dot{display:flex;gap:7px;align-items:center}.live-dot i,.community-caption i{width:5px;height:5px;border-radius:50%;background:#6f976e}.live-dot.offline i{background:#c58b50}.toast{position:absolute;z-index:15;left:50%;bottom:80px;max-width:calc(100vw - 32px);width:max-content;padding:12px 18px;border-radius:10px;background:#294c40f2;color:#fffcf4;font-size:11px;text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:.25s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{color:var(--ink);background:var(--paper);border:1px solid #fff;border-radius:24px;width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:32px;box-shadow:0 30px 100px #173d3a40;overscroll-behavior:contain}dialog::backdrop{background:#26473f4f;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:17px;top:12px;border:0;background:none;font-size:27px;color:#82917c}.dialog-intro{font-size:12px;color:var(--muted);line-height:1.7;margin:14px 0 23px}dialog h2{font:800 34px/1.1 "Manrope";letter-spacing:-.06em;margin:0}.growth-timeline{padding:0;margin:0;list-style:none;display:grid;gap:0}.growth-timeline li{display:flex;gap:15px;position:relative;padding-bottom:19px}.growth-timeline li:not(:last-child)::after{content:"";position:absolute;top:34px;bottom:0;left:21px;width:1px;background:#dfe4d4}.growth-timeline b{display:grid;place-items:center;width:43px;height:34px;flex:none;border-radius:8px;background:#e5ebdc;color:#597356;font-size:10px}.growth-timeline li:nth-child(4) b,.growth-timeline li:nth-child(6) b{background:#ecd4b0;color:#ac6a39}.growth-timeline strong,.growth-timeline span{display:block}.growth-timeline strong{font:800 12px "Manrope";margin:2px 0 4px}.growth-timeline span{color:var(--muted);font-size:10px;line-height:1.55}.dialog-note{border-top:1px solid var(--line);padding-top:16px;font-size:9px;color:#8a9581;line-height:1.6;margin:0}
.topbar-actions{display:flex;align-items:center;gap:11px;pointer-events:auto}.lead-cta{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 11px;background:#315e4cf0;border:1px solid #2a5342;border-radius:16px;color:#fffcf4;text-align:left;box-shadow:var(--shadow);backdrop-filter:blur(18px);transition:background .2s,transform .2s}.lead-cta:hover{background:#244c3c;transform:translateY(-1px)}.lead-cta-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;background:#ffffff21;border-radius:50%}.lead-cta-icon svg{width:19px}.lead-cta-text strong,.lead-cta-text small{display:block}.lead-cta-text strong{font:800 13px/1 "Manrope";letter-spacing:-.04em}.lead-cta-text small{font-size:9px;color:#cfe0d2;margin-top:4px}#lead-form{display:grid;gap:12px}.lead-field{display:grid;gap:5px}.lead-field>span{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7a897a}.lead-field input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fffefa;font-size:12px}.lead-field input::placeholder{color:#9eab9f}.lead-field input:focus{outline:0;border-color:#789e87;box-shadow:0 0 0 2px #779e8733}.lead-field input[aria-invalid=true]{border-color:#bd6446;box-shadow:0 0 0 2px #bd644626}.lead-hint{margin:-5px 0 0;font-size:9px;color:#6f8578}.lead-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.lead-error{margin:0;padding:10px 12px;border-radius:9px;background:#f4e1d6;color:#9a4a2c;font-size:10px;line-height:1.55}.lead-submit{margin-top:2px;padding:13px 16px;border:1px solid #315e4c;border-radius:11px;background:#315e4c;color:#fffcf4;font-size:12px;font-weight:600;box-shadow:0 5px 12px #24463e14;transition:background .2s}.lead-submit:hover{background:#244c3c}.lead-submit:disabled{opacity:.55}#lead-dialog .dialog-intro{margin:14px 0 20px}#lead-dialog .dialog-note{margin-top:17px}
.loading-screen{position:absolute;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:25px;background:#e6eee1;transition:opacity .6s,visibility .6s}.loading-screen.done{opacity:0;visibility:hidden}.loading-screen p{font-size:11px;color:#6c8166;max-width:260px;text-align:center;line-height:1.7}.loading-house{position:relative;width:36px;height:30px;border-radius:3px;background:#f9f0d8;box-shadow:0 15px 20px #52734720;animation:houseBounce 1.5s ease-in-out infinite}.loading-house::before{content:"";position:absolute;left:1px;top:-14px;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:19px solid #c47b54}.loading-house::after{content:"";position:absolute;width:9px;height:16px;bottom:0;left:14px;background:#668565}.reel-caption{display:none}
@keyframes houseBounce{50%{transform:translateY(-5px)}}@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.hero-copy{left:5vw}.atlas-key{left:5vw}.city-summary{left:5vw}.topbar{padding-inline:4vw}.search-panel{width:420px}.hero-copy h1{font-size:49px}}
@media(max-width:1100px) and (min-width:761px){.brand small{display:none}.topbar-actions{gap:8px}.lead-cta{padding:9px 12px 9px 9px;border-radius:13px}.lead-cta-icon{width:27px;height:27px}.lead-cta-icon svg{width:16px}.lead-cta-text strong{font-size:11px}.lead-cta-text small{display:none}.brand strong{font-size:13px}.topbar{padding-inline:24px}.search-panel{width:320px}.hero-copy{left:26px;width:220px;top:26%}.hero-copy h1{font-size:33px}.hero-copy>p:not(.eyebrow){font-size:10px}.hero-copy .eyebrow{font-size:7px}.explore-button{font-size:9px;gap:10px}.city-summary{width:265px;left:24px}.resident-card{width:260px;right:24px}.atlas-key{left:24px;width:350px}.map-hint{display:none}.ocean-label{left:80%;font-size:8px}}
/* Campo de texto no mobile nunca abaixo de 16px: com fonte menor o Safari do
   iOS da zoom sozinho ao focar e a pagina inteira fica ampliada. O placeholder
   volta ao tamanho antigo, porque ele nao conta para esse zoom. */
@media(max-width:760px){
 .topbar{height:78px;padding:18px 18px 12px}.brand{gap:8px}.brand-mark{width:37px;height:37px}.brand-mark svg{width:22px}.brand strong{font-size:13px}.brand small{display:none}.counter{padding:8px 11px;border-radius:11px;gap:0}.topbar-actions{gap:8px;align-items:stretch}.lead-cta{align-self:stretch;padding:0 11px;border-radius:11px;gap:0}.lead-cta-icon{width:22px;height:22px;background:none}.lead-cta-icon svg{width:21px}.lead-cta-text{display:none}#lead-dialog{padding:22px 20px}#lead-dialog h2{font-size:26px}#lead-dialog .dialog-intro{font-size:11px;margin:12px 0 17px}#lead-form{gap:10px}.lead-field input{padding:10px 12px;font-size:16px}.lead-submit{font-size:12px;padding:12px 14px}.counter-icon{display:none}.counter strong{font-size:20px}.counter small{font-size:8px;margin-top:2px}.search-panel{top:83px;left:18px;right:18px;width:auto;transform:none}.search-box{border-radius:12px;padding:4px 4px 4px 13px}.search-box input{font-size:16px;padding:8px 0}.search-box input::placeholder{font-size:12px}.search-box button{width:36px;height:36px}.hero-copy{top:154px;left:20px;width:calc(100vw - 40px);text-align:center}.hero-copy .eyebrow{justify-content:center;font-size:7px;margin:0 0 8px}.hero-copy h1{font-size:26px;letter-spacing:-.055em}.hero-copy h1 br{display:none}.hero-copy>p:not(.eyebrow),.hero-copy .text-button,.community-caption{display:none}.explore-button{margin:11px auto 0;padding:7px 10px;background:#fffcf4bb;color:#486450;border:1px solid #fff9;box-shadow:none;font-size:9px;border-radius:20px;gap:8px}.explore-button span{font-size:12px}.compass{right:23px;top:150px;opacity:.7}.compass svg{width:17px;height:24px}.compass b{font-size:8px}.ocean-label{top:61%;left:75%;font-size:7px;letter-spacing:.12em}.atlas-key{left:18px;right:18px;bottom:calc(55px + env(safe-area-inset-bottom));width:auto;padding:12px 13px 10px;border-radius:13px}.key-heading{font-size:7px;margin-bottom:10px}.region-key{gap:10px;justify-content:space-between}.region-key button{font-size:8px;gap:4px}.region-key i{width:6px;height:6px}.layer-controls{margin-top:11px;padding-top:9px;gap:10px}.layer-controls button,.layer-controls>span{font-size:7px}.zoom-controls{right:18px;bottom:calc(190px + env(safe-area-inset-bottom));gap:6px}.zoom-controls button{width:36px;height:36px;border-radius:10px;font-size:22px}.zoom-stage{right:65px;bottom:calc(195px + env(safe-area-inset-bottom))}.zoom-stage small{display:none}.zoom-stage strong{font-size:9px}.map-hint{display:none}footer{left:19px;right:19px;bottom:calc(26px + env(safe-area-inset-bottom));font-size:8px}.state-label{font-size:10px}.city-summary{top:146px;left:18px;right:18px;width:auto;padding:13px 15px;border-radius:14px}.city-summary-heading{gap:8px}.city-summary-heading small{font-size:7px}.city-summary h2{font-size:16px}.city-rank{padding:6px;font-size:8px}.city-evolution{margin-top:11px;padding-top:9px}.city-evolution span{font-size:11px}.city-evolution button{height:20px;width:20px;font-size:11px}.city-level-detail{display:none}.city-metrics{margin-top:9px;gap:6px}.city-metrics>span{padding:6px 9px}.city-metrics strong{font-size:17px}.city-founder{padding:6px 0;font-size:9px;gap:6px}.city-founder strong{margin-left:auto;font-size:9px}.city-progress{margin-top:3px}.city-progress>small{font-size:8px;margin-top:7px}.city-progress-track{height:4px}.resident-card{top:auto;bottom:calc(52px + env(safe-area-inset-bottom));left:18px;right:18px;width:auto;padding:13px 15px;border-radius:14px;grid-template-columns:35px minmax(0,1fr);gap:8px}.resident-avatar{width:35px;height:35px}.resident-card h2{font-size:12px;margin:3px 0}.resident-card p{font-size:9px}.resident-number{position:absolute;top:17px;right:17px;font-size:7px;max-width:84px}.resident-card>div:nth-child(3){padding-right:69px}.share-resident{padding:9px}.has-resident .city-summary .city-metrics,.has-resident .city-summary .city-founder,.has-resident .city-summary .city-progress{display:none}.has-resident .city-summary .city-evolution{margin-top:8px;padding-top:7px}.close-view .zoom-controls{bottom:calc(235px + env(safe-area-inset-bottom))}.close-view .zoom-stage{bottom:calc(240px + env(safe-area-inset-bottom))}.close-view .compass{display:none}.toast{bottom:calc(188px + env(safe-area-inset-bottom));font-size:10px;width:calc(100vw - 44px);padding:10px}.close-view .toast{bottom:calc(205px + env(safe-area-inset-bottom))}
}
@media(max-width:370px){.brand strong{font-size:11px}.hero-copy h1{font-size:23px}.region-key button{font-size:7px}.region-key{gap:6px}.layer-controls{gap:7px}.resident-number{display:none}.resident-card>div:nth-child(3){padding-right:8px}}
@media(max-height:670px) and (max-width:760px){.hero-copy{top:141px}.hero-copy .eyebrow{display:none}.hero-copy h1{font-size:23px}.atlas-key{padding:9px 12px}.key-heading{display:none}.zoom-controls{bottom:160px}.zoom-stage{bottom:165px}.city-summary{top:140px}.city-summary .city-level-detail,.city-summary .city-founder{display:none}.close-view .zoom-controls{bottom:205px}.close-view .zoom-stage{bottom:210px}}
body.reel-mode .topbar,body.reel-mode .hero-copy,body.reel-mode .search-panel,body.reel-mode .map-hint,body.reel-mode .zoom-controls,body.reel-mode #zoom-stage,body.reel-mode .city-summary,body.reel-mode .resident-card,body.reel-mode footer,body.reel-mode .atlas-key,body.reel-mode .compass,body.reel-mode .ocean-label{display:none!important}body.reel-mode .reel-caption{position:fixed;left:50%;bottom:13vh;z-index:41;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(52vh,92vw);transform:translate(-50%,14px);opacity:0;text-align:center;transition:opacity .5s,transform .5s;pointer-events:none}body.reel-mode .reel-caption.in{transform:translate(-50%,0);opacity:1}.reel-caption strong{color:#fffdf5;font:800 clamp(30px,6.4vh,58px)/1.04 "Manrope";letter-spacing:-.02em;-webkit-text-stroke:7px #24463e;paint-order:stroke fill}.reel-caption span{color:#fff3d8;font:700 clamp(14px,2.5vh,23px) "Manrope";-webkit-text-stroke:5px #24463e;paint-order:stroke fill}.reel-caption span:empty{display:none}.reel-mark{padding:5px 12px;background:var(--orange);border-radius:20px;font:800 12px "Manrope"}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
body.reel-mode #geographic-labels{display:none!important}

/* Ranking lateral. A aba fica colada na borda direita e o painel abre no
   mesmo canto do cartao de morador, por isso um fecha o outro no JS. A pedido
   do dono (16/10/2026) a aba ficou dourada, deitada e com o nome do
   presidente (jogo.js), para ser vista de longe. Com o cartao aberto no
   computador, ela volta a ser so o icone. */
.ranking-tab{position:absolute;z-index:7;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:9px;padding:9px 16px 9px 9px;border:1px solid #d9a93a;border-right:0;border-radius:16px 0 0 16px;background:linear-gradient(135deg,#f9da80,#efbb42);box-shadow:0 10px 26px #7a5a1640;color:#3b2a08;text-align:left;transition:padding .2s,filter .2s}
.ranking-tab:hover{filter:brightness(1.05);padding-right:20px}
.ranking-tab-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:#fff6d8;color:#a8741a}
.ranking-tab-icon svg{width:20px}
.ranking-tab-text{min-width:0}
.ranking-tab-text strong,.ranking-tab-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking-tab-text strong{font:800 15px/1 "Manrope";letter-spacing:-.02em}
.ranking-tab-text small{max-width:170px;margin-top:4px;font:600 10px "DM Sans";color:#6b4e12}
@media(min-width:761px){.has-resident .ranking-tab{padding:6px 4px 6px 5px}.has-resident .ranking-tab-icon{width:24px;height:24px}.has-resident .ranking-tab-icon svg{width:15px}.has-resident .ranking-tab-text{display:none}}
.ranking-tab[aria-expanded=true]{opacity:0;pointer-events:none}
.ranking-panel{position:absolute;z-index:9;right:35px;top:125px;width:330px;max-height:min(62vh,540px);display:flex;flex-direction:column;padding:19px;background:#fffcf4f5;border:1px solid white;border-radius:16px;box-shadow:var(--shadow);backdrop-filter:blur(18px);animation:panelIn .3s ease}
.ranking-heading{display:flex;flex-direction:column;gap:3px;padding-right:22px}
.ranking-heading span{color:#7a897a;font-size:9px;font-weight:700;letter-spacing:.15em}
.ranking-heading strong{font:800 18px "Manrope";letter-spacing:-.03em}
.ranking-search{display:flex;align-items:center;gap:8px;margin:13px 0 9px;padding:0 11px;background:#f3f4e9;border:1px solid #d9e0ce;border-radius:9px}
.ranking-search svg{width:14px;flex:none;color:#789081}
.ranking-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:10px 0;font-size:13px}
.ranking-search input::placeholder{color:#8b998d}
.ranking-search:focus-within{border-color:#8fae99;box-shadow:0 0 0 2px #779e8733}
.ranking-list{flex:1;overflow-y:auto;margin:0;padding:0;list-style:none}
.ranking-list li+li{border-top:1px solid #63796915}
.ranking-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:11px 6px;border:0;border-radius:7px;background:none;text-align:left}
.ranking-row:hover{background:#eaf0e5}
.ranking-pos{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#e9eddf;color:#6f816e;font:800 12px "Manrope"}
.ranking-row[data-podium="1"] .ranking-pos{background:#eee3c7;color:#9b7641}
.ranking-row[data-podium="2"] .ranking-pos{background:#e5e7e2;color:#76817c}
.ranking-row[data-podium="3"] .ranking-pos{background:#eddfd2;color:#9c6f4e}
.ranking-city{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking-city em{font-style:normal;color:#8a9783;font-size:10px;letter-spacing:.06em}
.ranking-count{font:800 15px "Manrope";letter-spacing:-.03em;color:#315e4c}
.ranking-count small{display:block;font:500 8px "DM Sans";color:#8b937f;letter-spacing:.06em}
.ranking-empty{margin:14px 0 2px;font-size:12px;color:var(--muted);text-align:center}
@media(min-width:1500px){.ranking-panel{right:5vw}}
@media(max-width:1100px) and (min-width:761px){.ranking-panel{width:290px;right:24px}}
@media(max-width:760px){
  .ranking-tab{top:auto;right:auto;left:18px;bottom:calc(238px + env(safe-area-inset-bottom));transform:none;gap:7px;padding:6px 12px 6px 6px;border-right:1px solid #d9a93a;border-radius:12px}
  .ranking-tab-icon{width:28px;height:28px}
  .ranking-tab-icon svg{width:16px}
  .ranking-tab-text strong{font-size:12px}
  .ranking-tab-text small{max-width:132px;margin-top:2px;font-size:9px}
  .close-view .ranking-tab{bottom:calc(283px + env(safe-area-inset-bottom))}
  .ranking-panel{top:146px;left:18px;right:18px;width:auto;max-height:52vh;padding:13px 15px;border-radius:14px}
  .ranking-heading strong{font-size:16px}
  /* 16px evita o zoom automatico do iOS ao focar o campo. O padding menor
     compensa a fonte maior, e o placeholder volta ao tamanho antigo. */
  .ranking-search input{font-size:16px;padding:6px 0}
  .ranking-search input::placeholder{font-size:11px}
}
body.reel-mode .ranking-tab,body.reel-mode .ranking-panel{display:none!important}

/* Doação por Pix. O botão fica ao lado de "Minha empresa", em laranja para
   não ser confundido com ele; a tela reaproveita o visual dos outros dialogs. */
.donation-cta{display:flex;align-items:center;gap:9px;padding:10px 15px 10px 10px;background:#cf6945f2;border:1px solid #b9583a;border-radius:16px;color:#fffcf4;box-shadow:var(--shadow);backdrop-filter:blur(18px);transition:background .2s,transform .2s}
.donation-cta:hover{background:#b9583a;transform:translateY(-1px)}
.donation-cta-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;background:#ffffff26;border-radius:50%;font:800 16px/1 "Manrope"}
.donation-cta-text{font:800 13px/1 "Manrope";letter-spacing:.02em}
#donation-dialog h2 em{font-style:normal;color:var(--orange)}
.pix-card{display:grid;gap:10px;margin-bottom:18px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fffefa}
.pix-label{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7a897a}
.pix-key{font:800 26px/1.1 "Manrope";letter-spacing:-.03em;color:var(--ink)}
.pix-details{display:grid;gap:6px;margin:0;padding-top:10px;border-top:1px solid var(--line)}
.pix-details div{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.pix-details dt{color:var(--muted)}
.pix-details dd{margin:0;font-weight:700;text-align:right}
.pix-copy{margin-top:4px;padding:13px 16px;border:1px solid #cf6945;border-radius:11px;background:#cf6945;color:#fffcf4;font-size:12px;font-weight:700;transition:background .2s}
.pix-copy:hover{background:#b9583a}
.pix-feedback{margin:0;min-height:14px;font-size:10px;color:#4f7a5f;text-align:center}
@media(max-width:1100px) and (min-width:761px){.donation-cta{padding:9px 12px 9px 9px;border-radius:13px}.donation-cta-icon{width:27px;height:27px;font-size:14px}.donation-cta-text{font-size:11px}}
@media(max-width:760px){.donation-cta{align-self:stretch;flex-direction:column;justify-content:center;padding:0 7px;border-radius:11px;gap:3px}.donation-cta-icon{width:auto;height:auto;background:none;font-size:16px}.donation-cta-text{font-size:8px}#donation-dialog{padding:22px 20px}#donation-dialog h2{font-size:26px}#donation-dialog .dialog-intro{font-size:11px;margin:12px 0 17px}.pix-key{font-size:23px}}
/* Abaixo de 390px o rótulo empurra o nome do site para duas linhas: fica só o $. */
@media(max-width:389px){.donation-cta{padding:0 9px;gap:0}.donation-cta-text{display:none}}
/* Nome da cidade no zoom de bairro (main.js, updateCityNameLabels): menor que o selo. */
.city-name-label{position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;padding:2px 7px;border-radius:6px;background:#fffcf4d9;box-shadow:0 2px 8px #24463e1f;font:700 9px "DM Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#24463e}
@media(max-width:760px){.city-name-label{font-size:8px;padding:2px 6px}}
/* Celular com o cartão do morador aberto: botões de zoom em fileira logo acima dele, à direita, e aba Ranking na mesma altura, à esquerda; em tela baixa a aba some (main.js, updateResidentCardSpace). */
@media(max-width:760px){.has-resident .zoom-controls{bottom:calc(var(--resident-card-space,0px) + 8px);grid-auto-flow:column}.has-resident .zoom-stage{display:none}.has-resident .ranking-tab{bottom:calc(var(--resident-card-space,0px) + 8px)}}
@media(max-width:760px) and (max-height:700px){.has-resident .ranking-tab{display:none}}
/* Botão de balões: só de perto, onde os balões aparecem; verde e riscado quando estão ocultos (main.js, setResidentLabelsHidden). */
.zoom-controls .labels-toggle{display:none}.close-view .zoom-controls .labels-toggle{display:grid}.zoom-controls .labels-toggle svg{width:19px}.labels-toggle .labels-toggle-off{display:none}.zoom-controls .labels-toggle[aria-pressed=false]{background:#315e4c;border-color:#315e4c;color:#fffcf4}.labels-toggle[aria-pressed=false] .labels-toggle-off{display:block}.labels-toggle[aria-pressed=false] .labels-toggle-text{display:none}
@media(max-width:760px){.zoom-controls .labels-toggle{position:absolute;right:calc(100% + 6px);top:0}}
/* Botão "Escolha seu boneco" (main.js, setupBonecosDialog): no computador fica acima do texto de abertura e, de perto, desce para o canto da legenda das regiões; no celular fica embaixo à esquerda, na altura do zoom, e some com o cartão do morador. */
.bonecos-cta{position:absolute;z-index:5;left:40px;top:calc(25% - 64px);display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:1px solid #b9573a;border-radius:15px;background:#cf6945;color:#fffcf4;text-align:left;box-shadow:0 8px 22px #8a3f2433;transition:background .2s,transform .2s}.bonecos-cta:hover{background:#bd5c3a;transform:translateY(-1px)}.bonecos-cta-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:#ffffff2b}.bonecos-cta-icon svg{width:19px}.bonecos-cta-text strong,.bonecos-cta-text small{display:block}.bonecos-cta-text strong{font:800 13px/1 "Manrope";letter-spacing:-.03em}.bonecos-cta-text small{font-size:9px;color:#fde3d6;margin-top:4px}.bonecos-cta-novo{padding:3px 6px;border-radius:6px;background:#ffd13b;color:#5a3a12;font:800 8px "Manrope";letter-spacing:.08em;text-transform:uppercase}.close-view .bonecos-cta{top:auto;bottom:65px;left:36px}body.reel-mode .bonecos-cta{display:none!important}
#bonecos-dialog{width:min(660px,calc(100vw - 28px))}#bonecos-dialog .dialog-intro strong{color:var(--ink)}.bonecos-escolha h3{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font:800 13px "Manrope"}.bonecos-escolha h3 span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.bonecos-lista{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}.boneco-item{display:grid;justify-items:center;padding:4px 4px 8px;border:1px solid #e3e6d6;border-radius:12px;background:#f6f5ea}.boneco-item img{display:block;width:100%;height:auto;aspect-ratio:150/188}.boneco-item b{display:grid;place-items:center;width:26px;height:26px;margin-top:-4px;border-radius:50%;background:var(--orange);color:#fff;font:800 13px/1 "Manrope"}.boneco-item:hover{border-color:#cf694588;background:#fbf3e8}.boneco-item[aria-pressed=true]{border-color:#cf6945;background:#fbe9dd;box-shadow:0 0 0 2px #cf694555}.bonecos-comentario{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#eef2e6;font-size:12px;color:var(--muted)}.bonecos-comentario strong{font:800 17px "Manrope";color:var(--ink)}.bonecos-comentario button{margin-left:auto;padding:9px 14px;border:0;border-radius:9px;background:#315e4c;color:#fffcf4;font-size:11px;font-weight:600;white-space:nowrap}.bonecos-comentario button:disabled{background:#c9d2c6;color:#56685f}.bonecos-instagram{display:block;margin:12px 0 16px;padding:12px;border:1px solid #315e4c;border-radius:11px;color:#315e4c;font-size:12px;font-weight:600;text-align:center;text-decoration:none}.bonecos-instagram:hover{background:#315e4c;color:#fffcf4}
@media(min-width:1500px){.bonecos-cta,.close-view .bonecos-cta{left:5vw}}
@media(max-width:1100px) and (min-width:761px){.bonecos-cta{left:26px;top:calc(26% - 60px)}.close-view .bonecos-cta{left:24px}}
@media(max-width:760px){.bonecos-cta{top:auto;left:18px;bottom:calc(190px + env(safe-area-inset-bottom));gap:7px;padding:6px 10px 6px 6px;border-radius:12px}.bonecos-cta-icon{width:26px;height:26px}.bonecos-cta-icon svg{width:16px}.bonecos-cta-text small{display:none}.bonecos-cta-text strong{font-size:12px}.close-view .bonecos-cta{left:18px;bottom:calc(235px + env(safe-area-inset-bottom))}.has-resident .bonecos-cta{display:none}#bonecos-dialog{padding:22px 16px}#bonecos-dialog h2{font-size:26px}#bonecos-dialog .dialog-intro{font-size:11px;margin:12px 0 16px}.bonecos-lista{gap:5px;margin-bottom:12px}.boneco-item{padding:2px 2px 6px;border-radius:9px}.boneco-item b{width:22px;height:22px;font-size:11px}.bonecos-comentario{padding:10px 12px;gap:8px}.bonecos-comentario strong{font-size:15px}}