/* Cabeçalho, apresentação e detalhes são componentes nativos e responsivos. */
body header.map-header { padding: 0 0 28px; background: var(--paper); }
body header.map-header::before, body header.map-header::after { display: none; }
.project-masthead { background: var(--ink) url('/cartaz-textura.svg') repeat; color: var(--paper); text-align: center; padding: 30px 20px 54px; }
.masthead-title { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 0 auto; max-width: 1100px; font: italic 800 clamp(20px, 3vw, 36px)/1.1 var(--heading); text-transform: uppercase; }
.masthead-logo { display: block; width: 420px; max-width: 100%; height: auto; min-width: 0; }
.masthead-decoration { color: var(--red); font-style: normal; letter-spacing: 6px; white-space: nowrap; }
.project-opening { position: relative; isolation: isolate; background: var(--paper); border-radius: 30px 30px 0 0; margin-top: -22px; }
.project-opening::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url('/cartaz-textura.svg') repeat; opacity: .14; pointer-events: none; }
.opening-inner { max-width: 980px; padding: 56px 36px 26px; margin: auto; box-sizing: border-box; }
.vote-slogan { position: relative; max-width: 800px; margin: 0 auto; text-align: center; font-family: var(--heading); font-weight: 900; font-style: italic; text-transform: uppercase; }
.vote-intro { display: block; color: var(--red); font-size: clamp(32px, 7.8vw, 76px); line-height: 1; letter-spacing: -.035em; -webkit-text-stroke: .6px currentColor; paint-order: stroke fill; }
.vote-word { display: block; color: var(--ink); font-size: clamp(70px, 23.6vw, 224px); line-height: .95; letter-spacing: -.035em; -webkit-text-stroke: 2px currentColor; paint-order: stroke fill; }
.vote-slogan::before, .vote-slogan::after { content: '✦'; position: absolute; color: var(--red); font: 48px/1 Arial, sans-serif; pointer-events: none; }
.vote-slogan::before { left: 0; top: 20%; }
.vote-slogan::after { right: 0; bottom: 6%; }
/* Ilustração isolada com transparência, exibida inteira. Todo texto é HTML. */
.ballot-art { margin: 28px 0 18px; }
.ballot-art img { display: block; width: 100%; height: auto; }
body .project-title { color: var(--ink); font: 900 clamp(28px, 7.8vw, 76px)/.99 var(--heading); letter-spacing: -.025em; max-width: none; margin: 0 0 14px; padding: 0; text-transform: uppercase; overflow-wrap: normal; -webkit-text-stroke: .65px currentColor; paint-order: stroke fill; }
.project-title>span { display: block; }
.project-title em { color: var(--red); font-style: normal; }
.project-description { color: var(--ink); font: 500 clamp(16px, 2.1vw, 23px)/1.45 Arial, sans-serif; max-width: 850px; margin: 0 0 20px; }
.project-data-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; border-top: 2px solid var(--red); }
.project-data-line p { color: var(--muted); font: 13px/1.5 Arial, sans-serif; margin: 0; }
.project-data-line>span { color: var(--red); font-size: 30px; letter-spacing: 8px; white-space: nowrap; }
body .map-header .about, body .map-header .about[open] { box-sizing: border-box; max-width: none; margin: 0; padding: 0; border: 0; color: var(--paper); background: var(--ink) url('/cartaz-textura.svg') repeat; }
body .map-header .about summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 14px; max-width: 980px; margin: auto; padding: 20px 30px; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--paper); font: italic 800 clamp(23px, 3.6vw, 38px)/1.08 var(--heading); letter-spacing: -.015em; list-style: none; }
body .map-header .about summary::-webkit-details-marker { display: none; }
body .map-header .about summary::marker { content: ''; }
body .map-header .about summary:hover { background: #ffffff08; }
body .map-header .about summary:focus-visible { outline: 3px solid var(--paper); outline-offset: -6px; }
.about-star { color: var(--red); font: 36px/1 Arial, sans-serif; }
.about-toggle { color: var(--paper); font: 300 30px/1 Arial, sans-serif; text-align: center; }
.about-toggle::before { content: '+'; }
.about[open] .about-toggle::before { content: '−'; }
body .map-header .about .intro { box-sizing: border-box; max-width: 980px; margin: 0 auto; padding: 0 36px 28px; }
body .map-header .about .intro p { color: var(--paper); font: 16px/1.7 Arial, sans-serif; max-width: 800px; margin: 0 0 16px; }
body .map-header>.notice, body .map-header>.stats { box-sizing: border-box; width: calc(100% - 48px); max-width: 1320px; margin-left: auto; margin-right: auto; }
body .map-header>.notice { background: var(--soft); }
@media(max-width:760px) {
  .project-masthead { padding: 24px 16px 46px; }
  .masthead-title { gap: 8px; }
  .masthead-logo { width: 310px; }
  .masthead-decoration { display: none; }
  .project-opening { border-radius: 22px 22px 0 0; }
  .opening-inner { padding: 40px 18px 22px; }
  .vote-slogan::before, .vote-slogan::after { font-size: 26px; }
  .vote-word { -webkit-text-stroke: 1px currentColor; }
  .ballot-art { margin: 22px 0 16px; }
  body .project-title { -webkit-text-stroke: .35px currentColor; }
  .project-data-line { gap: 10px; }
  .project-data-line p { font-size: 12px; }
  .project-data-line>span { display: none; }
  body .map-header .about summary { grid-template-columns: 20px minmax(0, 1fr) 24px; gap: 10px; padding: 18px; }
  .about-star { font-size: 27px; }
  .about-toggle { font-size: 26px; }
  body .map-header .about .intro { padding: 0 22px 22px; }
  body .map-header>.notice, body .map-header>.stats { width: calc(100% - 32px); }
}

/* Mesma escala e intensidade da textura nas duas faixas pretas. */
.project-masthead, body .map-header .about, body .map-header .about[open] { background-size: 180px 180px; }

/* Resumo eleitoral fluido: dados em HTML, colagem decorativa independente. */
.city-overview { position:relative; isolation:isolate; overflow:hidden; color:var(--ink); background:var(--red) url('/cartaz-textura.svg') repeat; background-size:180px 180px; }
.city-overview-inner { box-sizing:border-box; position:relative; z-index:1; max-width:1320px; margin:0 auto; padding:24px 36px 22px; }
.city-overview-copy { width:61%; max-width:740px; }
.city-overview p, body .city-overview h2 { margin:0; }
.city-overview-eyebrow { display:table; padding:5px 10px 4px; background:var(--ink); color:var(--paper); font:800 15px/1.1 var(--heading); letter-spacing:.035em; }
body .city-overview h2 { padding:0; max-width:none; text-transform:none; letter-spacing:-.02em; }
.city-overview-number { display:block; color:var(--paper); font:900 clamp(82px,7.6vw,106px)/.98 var(--heading); letter-spacing:-.045em; font-variant-numeric:tabular-nums; margin:8px 0 0; }
.city-overview-number.city-counter-ready { position:relative; width:max-content; max-width:100%; }
.city-counter-stable { opacity:0; }
.city-counter-value { position:absolute; inset:0; white-space:nowrap; }
.city-overview-label { display:block; color:var(--ink); font:900 clamp(27px,2.5vw,35px)/1.08 var(--heading); }
.city-overview .city-overview-context { margin-top:5px; color:var(--paper); font:400 clamp(17px,1.7vw,21px)/1.35 Arial,sans-serif; }
.city-overview-meta { margin-top:14px; padding-top:10px; border-top:1px solid #0d0d0d60; }
.city-overview-coverage { color:var(--ink); font:800 clamp(19px,1.8vw,24px)/1.15 var(--heading); }
.city-overview .city-overview-source { margin-top:5px; color:var(--ink); font:400 12px/1.5 Arial,sans-serif; }
.city-overview .city-overview-note { max-width:650px; margin-top:3px; color:var(--ink); font:400 12px/1.45 Arial,sans-serif; }
body .city-overview-note a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
body .city-overview-note a:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.city-overview-illustration { position:absolute; z-index:0; inset:0 0 0 auto; width:65%; height:100%; max-width:none; pointer-events:none; mask-image:linear-gradient(to right,transparent 0%,#0003 35%,#000 74%); -webkit-mask-image:linear-gradient(to right,transparent 0%,#0003 35%,#000 74%); }
.city-overview-illustration img { display:block; width:100%; height:100%; object-fit:cover; object-position:58% top; }
.city-overview-caption { position:absolute; top:24px; right:36px; color:var(--paper); font:800 17px/1 var(--heading); transform:rotate(-5deg); text-align:left; }
@media(max-width:1000px) {
 .city-overview-inner { padding:24px; }
 .city-overview-copy { width:64%; }
 .city-overview-caption { top:22px; right:24px; font-size:15px; }
}
@media(max-width:760px) {
 /* Leitura compacta no celular: paisagem no fundo e dados em uma coluna. */
 .city-overview { background-color:var(--red); background-image:none; }
 .city-overview::before { content:''; position:absolute; z-index:0; inset:0; background:url('/cartaz-textura.svg') repeat; background-size:180px 180px; opacity:.35; pointer-events:none; }
 .city-overview-illustration { inset:0; width:100%; height:100%; margin:0; opacity:.2; mask-image:linear-gradient(to right,transparent 0%,#0007 40%,#000 100%); -webkit-mask-image:linear-gradient(to right,transparent 0%,#0007 40%,#000 100%); }
 .city-overview-illustration img { object-position:62% center; }
 .city-overview-inner { max-width:560px; padding:20px 20px 22px; }
 .city-overview-copy { width:100%; max-width:none; }
 .city-overview .city-overview-eyebrow { margin:0 0 10px; padding:4px 8px; font-size:12px; }
 body .city-overview h2 { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; }
 .city-overview-number { max-width:100%; margin:0; font-size:clamp(64px,18vw,80px); line-height:.88; letter-spacing:-.04em; }
 .city-overview-label { margin:0; font-size:clamp(23px,6.1vw,28px); line-height:1.06; text-wrap:pretty; }
 .city-overview .city-overview-context { margin-top:8px; font-size:16px; line-height:1.35; text-align:left; }
 .city-overview-meta { margin-top:16px; padding-top:12px; border-top-color:#0d0d0d55; }
 .city-overview-coverage { font-size:19px; line-height:1.2; text-align:left; text-wrap:pretty; }
 .city-overview .city-overview-source { margin-top:6px; font-size:13px; line-height:1.45; text-align:left; text-wrap:pretty; }
 .city-overview .city-overview-note { margin-top:8px; font-size:12.5px; line-height:1.5; text-wrap:pretty; }
 .city-overview-caption { display:none; }
}

/* Convites compactos: empilhados, com leitura horizontal no desktop. */
.participation-flow { --bahia-blue:#102f82; --ink:#102f82; --paper:#fff; box-sizing:border-box; display:grid; gap:12px; width:calc(100% - 48px); max-width:980px; margin:10px auto 26px; }
body .participation-flow #participation-invite { box-sizing:border-box; position:relative; isolation:isolate; overflow:hidden; display:block; width:100%; max-width:none; margin:0; padding:22px 24px 18px; border:0; border-radius:22px; background:var(--bahia-blue); color:var(--paper); box-shadow:0 5px 18px #210b0b0c; }
body .participation-flow #participation-invite::before { content:''; display:block; position:absolute; inset:0; z-index:0; background:url('/cartaz-textura.svg') repeat; background-size:90px 90px; opacity:.7; pointer-events:none; }
body .participation-flow #participation-invite::after { content:none; }
body #participation-invite .invite-copy { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; gap:10px 24px; width:100%; max-width:none; }
body .participation-flow #participation-invite h2 { grid-row:1 / 3; margin:0; padding:0; color:var(--paper); font:900 34px/1.04 var(--heading); letter-spacing:-.02em; -webkit-text-stroke:.3px currentColor; text-wrap:pretty; }
body .participation-flow #participation-invite .invite-copy p { max-width:none; margin:0; color:var(--paper); font:400 15px/1.4 Arial,sans-serif; }
body .participation-flow #participation-invite a.participation-button { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:space-between; gap:20px; justify-self:start; width:auto; max-width:100%; min-height:44px; margin:0; padding:10px 20px; border:2px solid var(--red); border-radius:999px; background:var(--red); color:var(--paper); text-decoration:none; font:800 20px/1.1 var(--heading); }
body .participation-flow #participation-invite a.participation-button:hover { background:var(--red); border-color:var(--paper); }
body .participation-flow #participation-invite a.participation-button:focus-visible { outline:3px solid var(--paper); outline-offset:4px; }
.invite-arrow { flex:0 0 auto; width:24px; height:20px; }
body #participation-invite .invite-signature { position:relative; z-index:2; display:flex; align-items:center; gap:16px; width:100%; margin:14px 0 0; color:var(--paper); font:700 10px/1.4 monospace; letter-spacing:.1em; }
.signature-rule { display:block; flex:1; height:1px; background:currentColor; opacity:.45; }
.invite-star { position:absolute; z-index:1; right:8px; top:8px; width:12px; height:12px; color:var(--paper); }
body .participation-flow .escuta-invite { box-sizing:border-box; position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:12px 24px; margin:0; padding:22px 24px 18px; border:1px solid #102f8233; border-radius:22px; background:var(--paper); color:var(--ink); }
body .participation-flow .escuta-invite::before { content:''; position:absolute; z-index:-1; inset:0; background:url('/cartaz-textura.svg') repeat; background-size:90px 90px; opacity:.35; pointer-events:none; }
body .participation-flow .escuta-invite h2 { color:var(--ink); margin:0; padding:0; font:900 32px/1.04 var(--heading); letter-spacing:-.02em; -webkit-text-stroke:.3px currentColor; text-wrap:pretty; }
.escuta-invite h2 span { display:block; }
.escuta-invite h2 span:last-child { color:var(--red); }
.escuta-invite-content { position:relative; display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; padding-left:24px; border-left:1px solid #102f8244; }
body .escuta-invite-content p { max-width:100%; margin:0; font:400 15px/1.4 Arial,sans-serif; color:var(--ink); }
body .participation-flow .escuta-invite .escuta-cta { box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:12px; align-self:flex-start; width:auto; max-width:100%; min-height:44px; margin:0; padding:10px 16px; border:1.5px solid var(--ink); border-radius:999px; background:transparent; box-shadow:none; color:var(--ink); text-decoration:none; font:800 18px/1.15 var(--heading); letter-spacing:0; -webkit-text-stroke:0; }
body .participation-flow .escuta-invite .escuta-cta:hover { background:var(--ink); color:var(--paper); box-shadow:none; }
body .participation-flow .escuta-invite .escuta-cta:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.escuta-cta .invite-arrow { width:22px; height:18px; }
body .participation-flow .escuta-signature { grid-column:1/-1; display:flex; align-items:center; gap:16px; margin:0; color:var(--ink); font:400 10px/1.4 monospace; letter-spacing:.08em; }
@media(max-width:760px) {
 .participation-flow { width:calc(100% - 32px); gap:12px; margin:4px auto 24px; }
 body .participation-flow #participation-invite { padding:18px; }
 body #participation-invite .invite-copy { width:100%; grid-template-columns:minmax(0,1fr); gap:10px; }
 body .participation-flow #participation-invite h2 { grid-row:auto; max-width:none; font-size:28px; line-height:1.04; }
 body .participation-flow #participation-invite .invite-copy p { font-size:15px; line-height:1.4; }
 body .participation-flow #participation-invite a.participation-button { min-height:44px; padding:10px 18px; font-size:19px; }
 .invite-star { display:none; }
 body #participation-invite .invite-signature { width:100%; margin-top:12px; font-size:9px; line-height:1.4; letter-spacing:.07em; }
 body .participation-flow .escuta-invite { padding:18px; gap:10px; grid-template-columns:minmax(0,1fr); }
 body .participation-flow .escuta-invite h2 { max-width:none; font-size:27px; line-height:1.04; }
 .escuta-invite-content { padding:0; border:0; gap:10px; }
 body .escuta-invite-content p { max-width:100%; padding-right:0; font-size:15px; line-height:1.4; }
 body .participation-flow .escuta-invite .escuta-cta { min-height:44px; padding:10px 13px; gap:10px; font-size:17px; }
 body .participation-flow .escuta-signature { font-size:9px; line-height:1.4; letter-spacing:.035em; }
 .escuta-signature .signature-rule { display:none; }
}

/* Indicação de expansão com movimento breve e respeito ao movimento reduzido. */
body .map-header .about summary { cursor:pointer; }
.about-hint { display:block; margin-top:7px; color:var(--paper); font:400 12px/1.3 Arial,sans-serif; letter-spacing:.01em; text-transform:none; opacity:.85; }
.about-hint-close, .about[open] .about-hint-open { display:none; }
.about[open] .about-hint-close { display:inline; }
.about-toggle { display:flex; align-items:center; justify-content:center; min-height:32px; }
.about-toggle::before, .about[open] .about-toggle::before { content:''; display:block; width:11px; height:11px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; }
.about:not([open]) .about-toggle::before { animation:about-expand-cue 1.6s ease-in-out 3; }
.about[open] .about-toggle::before { transform:rotate(225deg); }
@keyframes about-expand-cue { 0%,100% { transform:translateY(-2px) rotate(45deg); } 50% { transform:translateY(4px) rotate(45deg); } }
@media(prefers-reduced-motion:reduce) {
 .about:not([open]) .about-toggle::before { animation:none; }
 .about-toggle::before { transition:none; }
}

/* Gesto breve de confirmação sobre a ilustração original. */
body .ballot-trigger { display:block; width:100%; padding:0; margin:0; border:0; border-radius:16px; background:transparent; box-shadow:none; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.ballot-illustration { display:block; width:100%; height:auto; overflow:visible; }
body .ballot-trigger:focus-visible { outline:3px solid var(--red); outline-offset:5px; }
.ballot-confirm-flash { opacity:0; transition:opacity .12s; }
.ballot-trigger.is-confirming .ballot-confirm-flash { opacity:1; }
.ballot-art figcaption { margin:0; text-align:center; color:#555; font:400 12px/1.5 Arial,sans-serif; }
.ballot-art figcaption span { color:var(--red); font-weight:700; }
.ballot-status { display:block; text-align:center; color:var(--ink); font:400 12px/1.4 Arial,sans-serif; }
.ballot-status:empty { display:none; }
@media (prefers-reduced-motion:reduce) { .ballot-confirm-flash { transition:none; } }