/* A home: capa com a tecla CONFIRMA gigante, a frase com miniaturas, o que tem no site, a escolha de cidade
   (a faixa preta, como o teclado da urna), como funciona e as dúvidas. Tudo por cima de report.css. */

.home section{position:relative}
.home main h2{font-size:var(--step-head)}

/* capa: o título à esquerda, a tecla CONFIRMA enorme entrando pela direita, cortada pela tela */
.capa{display:flex;align-items:center;min-height:calc(100svh - 104px);padding:40px 0 88px;overflow:hidden}
.capa-grade{position:relative;z-index:1}
.capa-texto{max-width:54%}
.capa h1{font-size:var(--step-display);letter-spacing:-.03em;line-height:1;margin-left:-.04em}
.capa-frase{max-width:36ch;margin-top:36px;font-size:var(--step-lead);line-height:1.4}
.capa-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.capa-tecla{position:absolute;left:56%;top:7%;width:92vw;height:112%;border-radius:clamp(48px,7vw,120px);
  background:var(--confirma);border-bottom:36px solid var(--ledge-confirma);background-clip:padding-box}
.capa-tecla span{position:absolute;left:clamp(32px,5vw,88px);top:50%;transform:translateY(-60%);
  font:700 clamp(1.75rem,6.4vw,6.5rem)/1 var(--display);letter-spacing:-.01em;color:var(--on-confirma)}

/* intro: uma frase com miniaturas no formato da tecla */
.intro{padding:clamp(88px,9vw,144px) 0 clamp(64px,7vw,112px)}
.declaracao{max-width:30em;margin-inline:auto;text-align:center;font:600 clamp(1.5rem,.9rem + 1.6vw,2.25rem)/1.35 var(--text);
  letter-spacing:-.01em}
.miniatura{display:inline-block;width:1.35em;height:.9em;margin:0 .12em;vertical-align:-.1em;border-radius:.22em;
  overflow:hidden;background:var(--surface-2)}
.miniatura img{width:100%;height:100%;object-fit:cover}

/* o que tem no site: duas categorias, os itens em duas colunas com a tecla (ou a foto) como marcador */
.categoria+.categoria{margin-top:clamp(120px,12vw,200px)}
.cat-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.cat-cab a{text-decoration:none}
.cat-conta{color:var(--muted);font-variant-numeric:tabular-nums}
.cat-topo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-bottom:56px}
.cat-texto{grid-column:1/8}
.cat-foto{grid-column:8/13;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:var(--surface-2)}
.cat-sobre{max-width:52ch;margin-top:20px}
.itens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 64px;margin:0;padding:0;list-style:none}
.item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:start;height:100%;padding:16px;
  margin:-16px;border-radius:var(--r);text-decoration:none;transition:background-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.item:hover{background:var(--surface)}}
.item-tecla{display:grid;place-items:center;width:72px;height:64px;padding-bottom:4px;border-radius:var(--r);background:var(--ink);
  color:var(--on-ink);border-bottom:4px solid var(--ledge-ink);background-clip:padding-box;font:700 1rem/1 var(--display);letter-spacing:0;
  font-variant-numeric:tabular-nums}
.item-foto{width:72px;height:88px;border-radius:var(--r);object-fit:cover;background:var(--surface-2)}
.item-corpo{min-width:0}
.item-linha{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px}
.item-nome{font:700 1.25rem/1.3 var(--display);letter-spacing:-.01em}
.item-placar{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.item-placar .s{color:var(--sim)}.item-placar .n{color:var(--nao)}
.item-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;
  color:var(--muted);font-size:var(--step-small);line-height:1.5}
.item-nota{display:block;margin-top:8px;font-size:var(--step-small);font-weight:600}
.item-vazio{grid-column:1/-1;color:var(--muted)}
.cat-mais{margin-top:48px}

/* escolha de cidade: a faixa preta. A foto da cidade no formato da tecla, o retrato do prefeito na frente */
.vitrine{margin-top:clamp(120px,12vw,200px);padding:clamp(88px,9vw,144px) 0;background:var(--ink);color:var(--on-ink)}
.vitrine-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.vitrine-escolha{grid-column:1/5}
.vitrine h2{font-size:clamp(1.75rem,.9rem + 1.6vw,2.25rem);color:var(--on-ink-muted)}
.vitrine-ajuda{margin-top:8px;color:var(--on-ink-muted);font-size:var(--step-small)}
.vitrine-nomes{margin:28px 0 0;padding:0;list-style:none}
.vitrine-nomes button,.vitrine-nomes a{display:flex;align-items:center;gap:16px;width:100%;min-height:var(--tap);padding:6px 0;border:0;
  background:none;color:var(--on-ink-muted);font:700 clamp(1.75rem,.9rem + 1.6vw,2.25rem)/1.15 var(--display);letter-spacing:-.022em;
  text-align:left;text-decoration:none;cursor:pointer}
.vitrine-nomes button::before{content:"";flex:none;width:.78em;height:.6em;border-radius:7px;background:#3c3d41;
  border-bottom:3px solid #2a2b2e;background-clip:padding-box;transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.vitrine-nomes button[aria-pressed=true]{color:var(--on-ink)}
.vitrine-nomes button[aria-pressed=true]::before{background:var(--confirma);transform:translateY(2px)}
.vitrine-nomes button:active::before{transform:translateY(3px)}
.vitrine-nomes :focus-visible{outline-color:var(--on-ink)}
@media (hover:hover) and (pointer:fine){.vitrine-nomes button:hover{color:var(--on-ink)}}
.vitrine-disco{grid-column:5/10;position:relative;margin:0 0 0 8%}
.disco{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#2c2d30}
.disco img{width:100%;height:100%;object-fit:cover;transition:opacity 300ms ease}
.retrato{position:absolute;left:-14%;bottom:-10%;width:38%;padding:8px;border-radius:calc(var(--r) + 8px);background:var(--ink)}
.retrato img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);background:#2c2d30;transition:opacity 300ms ease}
.trocando .disco img,.trocando .retrato img{opacity:0}
.vitrine-fato{grid-column:10/13}
.fato-nome{font:700 var(--step-lead)/1.2 var(--display);letter-spacing:-.01em}
.fato-texto{margin-top:12px;color:var(--on-ink-muted)}
.vitrine-fato .tecla{margin-top:28px}
.vitrine :focus-visible{outline-color:var(--on-ink)}

/* como funciona: introdução em duas colunas e a sanfona de painéis, do mais escuro ao mais claro */
.como{padding-top:clamp(120px,12vw,200px)}
.como-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-bottom:64px}
.como-intro h2{grid-column:1/6}
.como-intro p{grid-column:7/12;max-width:52ch}
.sanfona{display:grid;gap:8px}
.painel{border-radius:var(--r);overflow:hidden;background:var(--tom);color:var(--tom-ink)}
.painel.tom-1{--tom:var(--ink);--tom-ink:var(--on-ink)}
.painel.tom-2{--tom:#46474b;--tom-ink:var(--on-ink)}
.painel.tom-3{--tom:#a7a69f;--tom-ink:var(--ink)}
.painel.tom-4{--tom:var(--surface);--tom-ink:var(--ink)}
.painel h3{font-size:var(--step-lead)}
.painel h3 button{display:flex;align-items:center;width:100%;min-height:64px;padding:12px 24px;border:0;background:none;color:inherit;
  font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.painel :focus-visible{outline-color:currentColor;outline-offset:-6px}
.painel-corpo{display:grid;gap:24px;padding:0 24px 28px}
.painel-corpo p{max-width:40ch}
.painel-corpo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.js .painel:not(.aberto) .painel-corpo{display:none}
@media (min-width:901px){
  .js .sanfona{display:flex;gap:0;height:520px;border-radius:var(--r);overflow:hidden}
  .js .painel{position:relative;flex:1 1 0;min-width:0;border-radius:0;transition:flex-grow 450ms var(--ease-in-out)}
  .js .painel.aberto{flex-grow:4.2}
  .js .painel:not(.aberto) h3{position:absolute;inset:0}
  .js .painel:not(.aberto) h3 button{align-items:flex-end;height:100%;padding:28px 0 28px 20px;font-size:1.25rem}
  .js .painel:not(.aberto) h3 button span{writing-mode:vertical-rl;transform:rotate(180deg)}
  .js .painel.aberto h3 button{min-height:0;padding:32px 32px 0;cursor:default}
  .js .painel-corpo{position:absolute;inset:auto 32px 32px 32px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;
    gap:32px;padding:0}
  .js .painel-corpo img{aspect-ratio:auto;height:300px}
}

/* dúvidas: fichas de arquivo, uma sobre a outra; a aba no alto de cada ficha traz o assunto */
.duvidas{padding-top:clamp(120px,12vw,200px)}
.duvidas-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.duvidas h2{grid-column:3/11;margin-bottom:72px}
.fichas{grid-column:3/11}
.ficha{position:relative;--ficha:var(--surface);background:var(--ficha);border-radius:0 var(--r) var(--r) var(--r)}
.ficha:nth-child(even){--ficha:var(--surface-2)}
.ficha summary{display:block;min-height:96px;padding:26px 32px 40px;list-style:none;cursor:pointer}
.ficha summary::-webkit-details-marker{display:none}
.aba{position:absolute;top:-44px;left:calc(var(--n) * 150px);display:flex;align-items:center;min-width:200px;height:44px;
  padding:0 20px;border-radius:var(--r) var(--r) 0 0;background:var(--ficha);font-size:var(--step-small);font-weight:600}
.ficha+.ficha{margin-top:38px}
.pergunta{display:flex;align-items:center;justify-content:space-between;gap:16px;font:700 1.25rem/1.3 var(--display);letter-spacing:-.01em}
.pergunta::after{content:"+";flex:none;display:grid;place-items:center;width:40px;height:36px;padding-bottom:3px;border-radius:9px;
  background:var(--ink);color:var(--on-ink);font:700 1.375rem/1 var(--text);border-bottom:3px solid var(--ledge-ink);background-clip:padding-box}
.ficha[open] .pergunta::after{content:"−";background:var(--confirma);color:var(--on-confirma);border-bottom:3px solid var(--ledge-confirma);background-clip:padding-box}
.ficha p{max-width:56ch;padding:0 32px 48px;margin-top:-12px}
.ficha summary:focus-visible{outline-offset:-6px}

/* movimento: a capa entra uma vez; as partes de cada seção sobem quando aparecem; a foto da cidade abre como
   obturador e respira devagar. Sem script, ou com movimento reduzido, tudo já está no lugar. */
@media (prefers-reduced-motion:no-preference){
  .capa h1,.capa-frase,.capa-acoes{animation:subir 900ms var(--ease-expo) both}
  .capa-frase{animation-delay:90ms}.capa-acoes{animation-delay:180ms}
  .capa-tecla{animation:apertar 1200ms var(--ease-expo) 120ms both}
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-expo);
    transition-delay:calc(var(--i,0) * 70ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .shutter{clip-path:inset(0 0 100% 0 round var(--r));transition:clip-path 1100ms var(--ease-in-out)}
  .js .shutter img{transform:scale(1.12);transition:transform 1500ms var(--ease-soft),opacity 300ms ease}
  .js .shutter.is-in{clip-path:inset(0 round var(--r))}
  .js .shutter.is-in img{transform:none}
  .js .shutter.is-in.respira img{animation:respirar 22s var(--ease-soft) infinite alternate}
  .js .shutter.parado img{animation-play-state:paused}
}
@keyframes subir{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes apertar{from{opacity:0;transform:translate(48px,-24px)}to{opacity:1;transform:none}}
@keyframes respirar{from{transform:scale(1)}to{transform:scale(1.07) translateX(-1.5%)}}

/* tablet e telefone: a tecla vai para baixo do texto; as seções viram uma coluna */
@media (max-width:900px){
  .capa{display:block;min-height:0;padding:32px 0 0}
  .capa-texto{max-width:none}
  .capa h1{font-size:clamp(2.5rem,8.6vw,4.5rem)}
  .capa-tecla{position:relative;left:50%;top:auto;width:130vw;height:clamp(180px,44vw,360px);margin-top:56px;
    transform:translateX(-50%);border-radius:clamp(40px,9vw,80px) clamp(40px,9vw,80px) 0 0;border-bottom:0}
  .capa-tecla span{left:calc(15vw + var(--margin));top:42%;font-size:13vw}
  .vitrine-grade{grid-template-columns:minmax(0,1fr);gap:40px}
  .vitrine-escolha,.vitrine-disco,.vitrine-fato{grid-column:1/-1}
  .vitrine-disco{order:-1;margin:0 0 28px 12%}
  .retrato{left:-14%;width:40%}
  .como-intro{grid-template-columns:minmax(0,1fr);gap:20px}
  .como-intro h2,.como-intro p{grid-column:1/-1}
  .duvidas h2,.fichas{grid-column:1/-1}
  .itens{grid-template-columns:minmax(0,1fr);gap:24px}
  .painel-corpo img{max-width:560px}
}
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
  .capa-tecla{animation-name:apertar-baixo}
}
@keyframes apertar-baixo{from{opacity:0;transform:translate(-50%,32px)}to{opacity:1;transform:translateX(-50%)}}
@media (max-width:640px){
  .capa h1{font-size:10.2vw;margin-left:0}
  .capa-frase{margin-top:24px;font-size:var(--step-body)}
  .capa-acoes{flex-direction:column;align-items:stretch;margin-top:28px}
  .intro{padding:96px 0}
  .declaracao{text-align:left;font-size:1.25rem;line-height:1.45}
  .cat-topo{grid-template-columns:minmax(0,1fr)}
  .cat-texto,.cat-foto{grid-column:1/-1}
  .itens{grid-template-columns:minmax(0,1fr);gap:16px}
  .item{grid-template-columns:56px minmax(0,1fr);gap:16px}
  .item-tecla{width:56px;height:52px;font-size:1rem}
  .item-foto{width:56px;height:70px}
  .cat-mais{width:100%}
  .vitrine-nomes{display:flex;flex-wrap:wrap;gap:4px 24px}
  .vitrine-nomes li{flex:none}
  .vitrine-nomes button,.vitrine-nomes a{font-size:1.625rem;width:auto}
  .aba{left:calc(var(--n) * 40px);min-width:0}
  .ficha summary{padding:22px 20px 36px}
  .ficha p{padding:0 20px 40px}
  .pergunta{font-size:1.125rem}
}