@font-face{font-family:'Jakarta';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/jakarta.woff2) format('woff2')}

/* =============================================================================
   v12 · C-cidade-v3 POLIDA — a campea aprovada em 08/09, com as DUAS correcoes
   que o operador nomeou. NENHUMA composicao nova: mesma estrutura, mesma
   paleta, mesma letra, mesmo HTML de conteudo.

   CORRECAO 1 — "delimitar bem onde termina os dados de uma unidade e onde
   comeca outra (dentro de um mesmo bloco de cidade)".
   O defeito, medido na v11: os DOIS limites eram a MESMA linha.
       fronteira ENTRE unidades ... 1px rgba(36,26,5,0.13)
       limite DENTRO da unidade ... 1px rgba(36,26,5,0.13)   <- identico
       vao entre unidades ......... 0.0px
   Lidos iguais, a unidade deixa de ser um objeto e a ficha vira uma pilha de
   2N linhas alternadas. O conserto NAO e engrossar a linha (isso deixaria a
   pagina barulhenta, e ele ja reprovou peso): e fazer os dois limites
   diferirem em ESPECIE, nao em grau.
       DENTRO da unidade -> mudanca de CHAO, sem linha nenhuma. A faixa de
         acoes ganha um plinto (#f0e5ca = tinta a 7% sobre a ficha) e o fio
         interno FOI REMOVIDO. Chao mais fundo logo abaixo do texto le-se como
         base da MESMA coisa.
       ENTRE unidades -> fio de ponta a ponta mais firme (.24) MAIS ar de
         verdade acima do nome. Dois sinais no mesmo ponto.
   Resultado: a ficha tem um tipo de linha so, e ela significa uma coisa so.

   CORRECAO 2 — "inserir um respiro/margem/sangria (espaco da borda) um pouco
   maior". Ele falou de ESPACO DA BORDA, e e la que o respiro cresce:
       sangria da pagina ......... 26/18/44 -> 32/22/56
       intervalo entre fichas .... 14 -> 18
       cabecalho da ficha ........ 16/17/12 -> 18/17/14   (so o vertical)
       linha da unidade .......... 14/15/12 -> 25/15/11   (so o vertical)
   O horizontal INTERNO ficou nos 15px da versao aprovada DE PROPOSITO, e o
   motivo foi medido: a sangria maior da pagina ja custa 8px de largura util,
   e o endereco mais longo de Florianopolis ("Av. Hercilio Luz, 760 · Centro")
   tinha so 5,75px de folga na v11. Gastar largura tambem no respiro interno
   quebraria endereco que hoje cabe. "Um pouco maior", nao o dobro.

   ⛔ O QUE O POLIMENTO NAO PODE TOCAR, e nao e gosto, e medicao:
     ficha creme sobre o amarelo, SEM fio ....... 1,48  a forma SOME
     fio de tinta cheia contra o amarelo ....... 10,56  o unico que passa 3:1
     branco sobre o amarelo ..................... 1,62  proibido como texto
   Logo: o fio de 1px de TINTA CHEIA de cada ficha e de cada botao claro fica
   como esta — nao afinado, nao clareado, nao trocado por sombra.

   Contraste do que MUDA nesta versao (mesma calculadora, calibrada 7,46 no
   par que o projeto ja publica):
     plinto #f2e4c2 contra a ficha #fff4d9 ...... 1,15   degrau de chao
     (calculadora calibrada 7 de 7 contra o que o projeto publica: 21,00 ·
      1,62 · 10,56 · 1,48 · 15,67 · 7,46 · 4,56)
     rotulo de acao #4a4130 sobre o plinto ...... 7,97   piso do projeto: 7
     (o antigo #594e38 sobre o plinto daria 6,48 e REPROVARIA — por isso o
      rotulo escureceu; o endereco, que continua sobre a ficha, nao mudou)
     endereco #594e38 sobre a ficha ............. 7,46   inalterado
     nome da unidade · tinta sobre a ficha ..... 15,67   inalterado
   ========================================================================== */
:root{
  --campo:#fec202;
  --ficha:#fff4d9;
  --plinto:#f2e4c2;              /* o chao da faixa de acoes: MESMO degrau de luminancia
                                    que tinta a 7% (1,15 contra a ficha), porem com o
                                    matiz puxado para o amarelo da marca. Tinta pura a 7%
                                    (#f0e5ca) da o mesmo degrau e le ACINZENTADO, que
                                    destoa de uma marca quente.
                                    ⚠ E um lavado de AMARELO sozinho nao serve: amarelo e
                                    claro, entao 12% dele muda a luminancia em 1,05 so —
                                    e degrau de croma, nao de claro/escuro, o mesmo engano
                                    que ja fez creme e branco medirem 1,06 neste projeto. */
  --tinta:#241a05;
  --leve:#594e38;                /* endereco e contagem, sobre a ficha (7,46) */
  --leve-plinto:#4a4130;         /* rotulo de acao, sobre o plinto (7,99) */
  --amar:#fec202;
  --fio:rgba(36,26,5,.24);       /* fronteira ENTRE unidades — o unico fio interno que sobrou */
  --fio-fraco:rgba(36,26,5,.10); /* divisor vertical entre as duas acoes */
  --mola:cubic-bezier(.3,.7,0,1);
  /* sombra em 3 camadas, mais difusa que a da v11: levanta a ficha do campo
     sem acrescentar nenhuma linha. */
  --sm:0 1px 2px rgba(36,26,5,.08),0 4px 10px -4px rgba(36,26,5,.14),
       0 16px 32px -14px rgba(36,26,5,.28);
}
*,*::before,*::after{box-sizing:border-box}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--campo);color:var(--tinta);
  font-family:'Jakarta',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;font-synthesis-weight:none}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

/* CORRECAO 2 · sangria da pagina: 26/18/44 -> 32/22/56 */
.pg{max-width:440px;margin:0 auto;padding:32px 22px 56px}

/* branco nao existe sobre o amarelo (1,62): o foco e tinta */
a:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:14px}

/* ===== MOVIMENTO =========================================================
   Entrada em CSS puro. O topo anima na carga; o resto anima ao ENTRAR na
   viewport, por animation-timeline:view(), que e CSS e nao espera script —
   um artefato deste ecossistema ja nasceu invisivel esperando JS.
   O @supports e a rede: onde view() nao existe, o bloco inteiro nao se
   aplica e o conteudo fica visivel e estatico. E o quadro inicial e
   opacity:.35, nunca 0, para que o pior caso ainda seja legivel.
   ========================================================================== */
@keyframes ent{from{opacity:0;transform:translate3d(0,15px,0)}to{opacity:1;transform:none}}
@keyframes surge{from{opacity:.35;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

.top{animation:ent .6s var(--mola) both}
.cap,.fal,.rod{animation:ent .6s var(--mola) both}
.cap:nth-of-type(2){animation-delay:.04s}
.cap:nth-of-type(3){animation-delay:.06s}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cap,.fal,.rod{
      animation:surge linear both;
      animation-delay:0s;
      animation-timeline:view();
      /* 'entry 0% entry 70%' e nao 'cover 26%': o rodape e o ULTIMO elemento e a
         pagina nao rola o bastante para ele completar um intervalo baseado em
         'cover'. Medido: com 'cover 26%' o rodape ficava preso em 0,64 no fim
         da rolagem. Com 'entry 70%' a entrada termina ANTES de o elemento estar
         inteiro na tela, entao todo mundo chega a 1,00. */
      animation-range:entry 0% entry 70%;
    }
  }
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:1e-5s!important}}

/* ===== 1 · CABECALHO ====================================================== */
.top{text-align:center;padding:4px 0 34px}
.top__logo{display:block;width:min(272px,76%);height:auto;margin:0 auto}
.top__lema{margin:16px auto 22px;max-width:21ch;color:var(--tinta);
  font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
.top__app{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.top__nota{margin:12px 0 0;font-size:12.5px;font-weight:600;color:var(--tinta);opacity:.9}

.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;letter-spacing:-.01em;border-radius:999px;
  transition:transform .4s var(--mola),box-shadow .4s var(--mola)}
.bt:active{transform:scale(.975)}
.ic{width:16px;height:16px;flex:none;display:block}
.ic--s{width:15px;height:15px;transition:transform .4s var(--mola)}
.bt--clara{background:var(--ficha);color:var(--tinta);font-size:14px;padding:12.5px 17px;
  border:1px solid var(--tinta);        /* 1,48 contra o campo: sem fio, some */
  box-shadow:var(--sm)}
.bt--clara:hover{transform:translateY(-1px)}

/* ===== 2 · A FICHA DA CIDADE ============================================== */
.cap{background:var(--ficha);border-radius:24px;box-shadow:var(--sm);
  border:1px solid var(--tinta);        /* 10,56 — e o fio que faz a forma existir */
  margin:0 0 18px;overflow:hidden;color:var(--tinta)}
.cap__cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:18px 17px 14px}
.cap__n{margin:0;font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.cap__c{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--leve);white-space:nowrap}

/* ===== 3 · A UNIDADE =====================================================
   CORRECAO 1, metade A: a FRONTEIRA. Fio de ponta a ponta, .24 (era .13), e
   agora e o unico fio horizontal dentro da ficha — nao disputa com nada.
   ========================================================================== */
.un{border-top:1px solid var(--fio)}
.un__cima{display:flex;align-items:center;gap:11px;padding:25px 15px 11px}
.un__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.un__n{font-size:18.5px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.un__e{font-size:13.5px;font-weight:400;color:var(--leve);line-height:1.3}

.bt--card{background:var(--amar);color:var(--tinta);font-size:13.5px;
  padding:11.6px 13px 11.6px 15px;flex:none;
  border:1px solid var(--tinta)}
.un:hover .bt--card .ic--s{transform:translateX(3px)}

/* CORRECAO 1, metade B: o limite INTERNO.
   Sem border-top nenhum. O que marca a divisao e o PLINTO — chao mais fundo,
   que amarra a faixa ao texto acima em vez de cortar. Especie diferente de
   sinal, nao intensidade diferente. */
.un__baixo{display:flex;background:var(--plinto)}
.lk{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 8px;font-size:13px;font-weight:600;color:var(--leve-plinto);
  transition:background-color .3s var(--mola),color .3s var(--mola)}
.lk+.lk{border-left:1px solid var(--fio-fraco)}
.lk:hover{background:rgba(254,194,2,.55);color:var(--tinta)}
.lk .ic{width:15px;height:15px;opacity:.7}

.sel{display:inline-block;vertical-align:2px;margin-left:6px;background:var(--tinta);
  color:var(--amar);font-size:10px;font-weight:800;letter-spacing:.06em;
  padding:2px 7px;border-radius:999px}

/* ===== 4 · FALE / RODAPE ================================================== */
.fal{margin:40px 0 0;text-align:center}
.fal__t{margin:0 0 15px;font-size:20px;font-weight:800;letter-spacing:-.025em;color:var(--tinta)}
.fal__p{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fal__n{margin:14px auto 0;max-width:31ch;font-size:12.5px;color:var(--tinta);opacity:.88;line-height:1.4}
.rod{margin:34px 0 0;text-align:center}