/* =========================================================================
   Arlei Romeiro 4556
   Base: protótipo mobile recebido da campanha. Reescrito para desktop,
   acessibilidade e conteúdo real.

   Paleta: azul e amarelo, tirados da arte-chave "A voz de quem constrói o
   Rio Grande". Contrastes medidos, não estimados:
     tinta   sobre branco     16.43
     azul    sobre branco     10.51
     cinza   sobre branco      5.37   (mínimo para texto secundário)
     branco  sobre azul       10.51
     amarelo sobre azul        7.38
     tinta   sobre amarelo    11.54
   REGRAS QUE SAEM DISSO, não quebrar:
     - amarelo sobre branco dá 1.42. NUNCA é cor de texto em fundo claro.
       É campo, régua ou fundo de botão com texto escuro.
     - amarelo sobre azul-mid (#416482) dá 4.38: só título grande, nunca corpo.
     - o verde só existe dentro da urna, onde verde significa "confirma".
       Verde sobre branco dá 4.19 e não serve para texto.
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-var.woff2?v=258a93fe') format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root{
  --azul:#23425A;
  --azul-esc:#12293B;
  --azul-mid:#416482;
  --azul-claro:#92B1C3;
  --amarelo:#EDD96F;
  --amarelo-esc:#D9BF45;
  --tinta:#12212B;
  --cinza:#5B6D7A;
  --linha:#DCE4E9;
  --soft:#F4F7F9;
  --branco:#fff;
  --verde:#0A8F3C;
  --sombra:0 18px 48px rgba(18,33,43,.10);
  --raio:14px;
  --larg:1120px;
  --gutter:20px;
}

*{box-sizing:border-box}
html{background:var(--branco);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--branco);
  color:var(--tinta);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--azul)}

.wrap{width:100%;max-width:var(--larg);margin:0 auto;padding-inline:var(--gutter)}

/* Foco visível: obrigatório, e não some no teclado */
:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--azul-mid);
  outline-offset:3px;
  border-radius:4px;
}
.pula{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--azul);color:#fff;padding:12px 18px;font-weight:800;
}
.pula:focus{left:8px;top:8px}

/* ---------- régua do RS: fica como detalhe, não como marca ---------- */
.rsline{height:5px;display:grid;grid-template-columns:1fr 1fr 1fr}
.rsline i:nth-child(1){background:var(--amarelo)}
.rsline i:nth-child(2){background:#D6261C}
.rsline i:nth-child(3){background:var(--verde)}

/* ---------- topo ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linha);
}
.topbar .wrap{height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:900;font-size:18px;letter-spacing:-.03em;color:var(--tinta);text-decoration:none}
.brand b{color:var(--azul-mid)}
.badge{
  border:1px solid var(--linha);border-radius:999px;
  padding:6px 13px;font-size:12px;font-weight:800;color:var(--azul);
  white-space:nowrap;
}
.nav{display:none}
@media (min-width:860px){
  .nav{display:flex;gap:26px;align-items:center}
  .nav a{
    color:var(--azul);text-decoration:none;font-weight:700;font-size:14.5px;
    padding:6px 0;border-bottom:2px solid transparent;
  }
  .nav a:hover{border-bottom-color:var(--amarelo-esc)}
}

/* ---------- hero ---------- */
.hero{background:var(--azul);color:#fff;padding:38px 0 34px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto -60px -140px auto;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(237,217,111,.16),transparent 68%);
}
.hero .wrap{position:relative;z-index:1}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amarelo);margin-bottom:14px;
}
.kicker::before{content:"";width:26px;height:3px;background:var(--amarelo);border-radius:2px}
.hero h1{
  margin:0;font-size:clamp(38px,10vw,68px);line-height:.98;
  letter-spacing:-.045em;font-weight:900;
}
.hero h1 span{
  display:block;margin-top:12px;
  font-size:clamp(14px,3.6vw,20px);font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--azul-claro);
}
.hero-lede{
  margin:20px 0 0;max-width:46ch;
  font-size:clamp(16px,2.3vw,19px);color:#DCE7EE;
}
.hero-key{margin-top:26px;border-radius:var(--raio);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.28)}
@media (min-width:900px){
  .hero{padding:64px 0 58px}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
  .hero-key{margin-top:0}
}

/* ---------- seções ---------- */
.sec{padding:46px 0}
.sec.soft{background:var(--soft)}
.eyebrow{
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-mid);margin-bottom:8px;
}
.sec h2{
  margin:0 0 12px;font-size:clamp(25px,5.4vw,38px);line-height:1.06;
  letter-spacing:-.035em;font-weight:900;color:var(--tinta);
}
.lede{margin:0 0 26px;max-width:62ch;color:var(--cinza);font-size:17px}
@media (min-width:900px){ .sec{padding:74px 0} }

/* ---------- urna ----------
   As medidas internas da urna são fixas em px, calibradas para um palco de
   ~372px. Deixar o palco crescer no desktop faz a moldura esticar e o conteúdo
   ficar pequeno dentro dela. Por isso o palco tem largura máxima travada e,
   no desktop, ele vai para o lado do texto em vez de crescer.               */
.urna-sec{background:var(--soft);padding:40px 0 48px}
.urna-cabeca{margin-bottom:18px}
.urna-cabeca h2{margin:0;font-size:clamp(22px,5vw,32px);letter-spacing:-.035em;font-weight:900}
.urna-cabeca small{
  display:block;font-size:11.5px;color:var(--azul-mid);font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:6px;
}
.urna-stage{position:relative;width:100%;max-width:430px;aspect-ratio:372/258;margin:0 auto}
.urna-body{position:absolute;inset:0 12px 0 0;background:linear-gradient(180deg,#d9dad4 0%,#c8c9c3 100%);border-radius:14px 10px 10px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 42px rgba(18,26,32,.18)}
.urna-face{position:absolute;left:14px;right:14px;top:14px;bottom:14px;background:linear-gradient(180deg,#d1d2cc 0%,#c6c7c1 100%);clip-path:polygon(3% 0, 100% 0, 96% 100%, 0 100%);border-radius:6px}
.urna-sidewedge{position:absolute;right:0;top:18px;bottom:18px;width:22px;background:linear-gradient(180deg,#b8b9b3 0%,#a8a9a3 100%);clip-path:polygon(0 4%,100% 0,100% 100%,0 96%);border-radius:0 8px 8px 0}
.urna-shadow{position:absolute;left:18px;right:24px;bottom:-9px;height:12px;border-radius:50%;background:rgba(0,0,0,.12);filter:blur(8px)}
.urna-content{position:absolute;left:24px;right:36px;top:24px;bottom:24px;display:grid;grid-template-columns:1.23fr .77fr;gap:12px}

.screen{position:relative;min-height:210px;background:#eaeadf;border:3px solid #b8b9b2;border-radius:3px;padding:10px 10px 40px;overflow:hidden}
.screen-top{font-size:9px;color:#222;line-height:1.25}
.screen-top b{display:block;font-size:11px}
.screen-grid{margin-top:8px;display:grid;grid-template-columns:1fr 72px;gap:8px;align-items:start}
.left-pane{min-width:0}
.right-pane{display:flex;flex-direction:column;align-items:stretch}
.num-label{font-size:8px;color:#5d5d5d;text-transform:uppercase;letter-spacing:.12em}
.digits{margin-top:5px;display:flex;gap:4px;min-height:39px}
.digit{width:30px;height:39px;display:flex;align-items:center;justify-content:center;border:2px solid #111;background:#fff;color:#111;font-size:21px;font-weight:900;opacity:0;animation-duration:8.4s;animation-iteration-count:infinite;animation-timing-function:ease}
.d1{animation-name:digit1}
.d2{animation-name:digit2}
.d3{animation-name:digit3}
.d4{animation-name:digit4}
@keyframes digit1{0%,9%{opacity:0}11%,84%{opacity:1;background:#111;color:#fff}90%,100%{opacity:0}}
@keyframes digit2{0%,20%{opacity:0}22%,84%{opacity:1;background:#111;color:#fff}90%,100%{opacity:0}}
@keyframes digit3{0%,31%{opacity:0}33%,84%{opacity:1;background:#111;color:#fff}90%,100%{opacity:0}}
@keyframes digit4{0%,42%{opacity:0}44%,84%{opacity:1;background:#111;color:#fff}90%,100%{opacity:0}}

.cand-photo{width:72px;height:88px;border:1px solid #96968f;background:#d6d7cf;overflow:hidden;opacity:0;transform:translateY(5px);animation:photoReveal 8.4s infinite ease}
.cand-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
@keyframes photoReveal{
  0%,49%{opacity:0;transform:translateY(5px)}
  54%{opacity:.25;transform:translateY(4px)}
  59%{opacity:.55;transform:translateY(3px)}
  64%{opacity:.82;transform:translateY(1px)}
  68%,84%{opacity:1;transform:translateY(0)}
  90%,100%{opacity:0;transform:translateY(5px)}
}
.cand-data{margin-top:10px;padding-top:8px;border-top:1px solid #aaa;font-size:8px;line-height:1.45}
.cand-data .reveal{opacity:0;animation:infoReveal 8.4s infinite ease}
.cand-data strong{display:block;margin-top:1px;font-size:10px;text-transform:uppercase}
@keyframes infoReveal{
  0%,52%{opacity:0}57%{opacity:.25}62%{opacity:.55}67%{opacity:.82}
  71%,84%{opacity:1}90%,100%{opacity:0}
}
.screen-bottom{position:absolute;left:10px;right:10px;bottom:8px;padding-top:6px;border-top:1px solid #aaa;font-size:7px;line-height:1.35;text-transform:uppercase;color:#363636}

.keyside{background:linear-gradient(180deg,#c7c8c2,#babbb5);border-radius:5px;padding:7px 6px 9px;display:flex;flex-direction:column;justify-content:space-between}
.justica{text-align:right;color:#696b66;font-size:7px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.key{height:29px;border-radius:3px;background:#242424;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;box-shadow:0 2px 0 #111;position:relative}
.key.zero{grid-column:2}
.key::after{content:"";position:absolute;inset:-2px;border-radius:4px;border:2px solid transparent}
.k4,.k5,.k6{animation-duration:8.4s;animation-iteration-count:infinite;animation-timing-function:ease}
.k4{animation-name:key4}
.k5{animation-name:key5}
.k6{animation-name:key6}
@keyframes key4{0%,8%{transform:translateY(0);box-shadow:0 2px 0 #111;background:#242424}9%,13%{transform:translateY(2px);box-shadow:0 0 0 #111;background:#555}14%,100%{transform:translateY(0);box-shadow:0 2px 0 #111;background:#242424}}
@keyframes key5{0%,19%{transform:translateY(0);box-shadow:0 2px 0 #111;background:#242424}20%,24%{transform:translateY(2px);box-shadow:0 0 0 #111;background:#555}25%,30%{transform:translateY(0);box-shadow:0 2px 0 #111;background:#242424}31%,35%{transform:translateY(2px);box-shadow:0 0 0 #111;background:#555}36%,100%{transform:translateY(0);box-shadow:0 2px 0 #111;background:#242424}}
@keyframes key6{0%,42%{transform:translateY(0);box-shadow:0 2px 0 #111;background:#242424}43%,47%{transform:translateY(2px);box-shadow:0 0 0 #111;background:#555}48%,100%{transform:translateY(0);box-shadow:0 2px 0 #111;background:#242424}}
.k4::after{animation:ring4 8.4s infinite ease}
.k5::after{animation:ring5 8.4s infinite ease}
.k6::after{animation:ring6 8.4s infinite ease}
@keyframes ring4{0%,8%{border-color:transparent}9%,13%{border-color:rgba(237,217,111,.95)}14%,100%{border-color:transparent}}
@keyframes ring5{0%,19%{border-color:transparent}20%,24%{border-color:rgba(237,217,111,.95)}25%,30%{border-color:transparent}31%,35%{border-color:rgba(237,217,111,.95)}36%,100%{border-color:transparent}}
@keyframes ring6{0%,42%{border-color:transparent}43%,47%{border-color:rgba(237,217,111,.95)}48%,100%{border-color:transparent}}
.actions-urna{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-top:6px}
.act{height:23px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.branco{background:#f2f2ee;color:#333}
.corrige{background:var(--amarelo-esc);color:#3a2f00}
.confirma{background:var(--verde);color:#fff;animation:confirmPulse 8.4s infinite ease}
@keyframes confirmPulse{0%,74%{filter:brightness(1)}78%{filter:brightness(1.45)}82%{filter:brightness(1)}86%{filter:brightness(1.45)}90%,100%{filter:brightness(1)}}
.demo-note{margin-top:14px;text-align:center;font-size:12.5px;color:var(--cinza)}

@media (min-width:900px){
  .urna-sec .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
  .urna-cabeca{margin-bottom:0}
  .urna-cabeca .lede{margin-bottom:0}
}

/* Quem não quer animação vê a urna JÁ preenchida, não vazia.
   Sem isto, prefers-reduced-motion congelaria tudo em opacity:0 e a peça
   principal da página viraria uma caixa cinza sem número nenhum. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .digit,.cand-photo,.cand-data .reveal,.k4,.k5,.k6,.k4::after,.k5::after,.k6::after,.confirma{
    animation:none !important;
  }
  .digit{opacity:1;background:#111;color:#fff}
  .cand-photo{opacity:1;transform:none}
  .cand-data .reveal{opacity:1}
  .css-count-reel{animation:none !important}
}

/* ---------- faixa do número ---------- */
.number-band{background:var(--azul-esc);color:#fff}
.number-band .wrap{
  padding-block:26px;display:flex;flex-wrap:wrap;gap:18px 34px;
  align-items:center;justify-content:space-between;
}
.number-band small{
  display:block;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul-claro);
}
.big-number{font-size:clamp(46px,11vw,74px);font-weight:900;letter-spacing:-.05em;color:var(--amarelo);line-height:1}
/* No celular a faixa empilha, e alinhar à direita deixa a segunda linha
   esfarrapada. Só alinha à direita quando as duas colunas cabem lado a lado. */
.number-band .cargo{font-size:15px;color:#CBDBE6;text-align:left}
.number-band .cargo b{display:block;color:#fff;font-size:19px;font-weight:900}
@media (min-width:620px){ .number-band .cargo{text-align:right} }

/* ---------- perfil ---------- */
.perfil-grid{display:grid;gap:28px}
.foto-card{border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);background:var(--soft)}
.mini-grid{display:grid;gap:12px;margin-top:26px}
.mini{border:1px solid var(--linha);border-radius:12px;padding:16px 18px;background:var(--branco)}
.mini b{display:block;font-size:15.5px;margin-bottom:3px;color:var(--tinta)}
.mini span{font-size:14.5px;color:var(--cinza)}
@media (min-width:760px){ .mini-grid{grid-template-columns:1fr 1fr} }
@media (min-width:900px){
  .perfil-grid{grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
  .foto-card{position:sticky;top:88px}
}

/* ---------- eixos ---------- */
.eixos{display:grid;gap:18px}
.eixo{
  position:relative;overflow:hidden;border-radius:var(--raio);
  padding:26px 24px;border:1px solid var(--linha);background:var(--branco);
}
.eixo::after{
  content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;
  border-radius:50%;opacity:.5;
}
.eixo.cidade::after{background:rgba(65,100,130,.16)}
.eixo.campo::after{background:rgba(237,217,111,.34)}
.eixo small{
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-mid);
}
.eixo h3{margin:8px 0 10px;font-size:22px;line-height:1.16;letter-spacing:-.03em;font-weight:900}
.eixo p{margin:0;color:var(--cinza);font-size:15.5px}
.eixo ul{margin:14px 0 0;padding-left:19px;color:var(--cinza);font-size:15px}
.eixo li{margin-bottom:5px}
@media (min-width:820px){ .eixos{grid-template-columns:1fr 1fr;gap:24px} }

/* ---------- linha do tempo ---------- */
.tl{position:relative;margin-top:6px;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--linha)}
.tl-item{position:relative;padding-bottom:28px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:-26px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--branco);border:3px solid var(--azul-mid);
}
.tl-item.destaque .tl-dot{border-color:var(--amarelo-esc);background:var(--amarelo)}
.tl-ano{font-size:12.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-mid)}
.tl-item h3{margin:4px 0 6px;font-size:19px;line-height:1.2;letter-spacing:-.02em;font-weight:900}
.tl-item p{margin:0;color:var(--cinza);font-size:15px}
.fonte{
  display:inline-block;margin-top:8px;font-size:12px;color:var(--azul-mid);
  font-weight:700;text-decoration:none;border-bottom:1px solid rgba(65,100,130,.35);
}
.fonte:hover{border-bottom-color:var(--azul-mid)}
/* Não usar `columns:2` aqui. O trilho vertical é um ::before do .tl, e com
   CSS columns ele desenha só na primeira coluna: os marcos da segunda ficam
   com bolinha solta e sem linha. Além disso, duas colunas quebram a leitura
   cronológica, porque "Abril de 2025" aparece na mesma altura de "Maio de
   2024". Coluna única, com a medida de linha limitada. */
@media (min-width:900px){
  .tl{padding-left:34px;max-width:56rem}
  .tl::before{left:11px}
  .tl-item{padding-bottom:34px}
  .tl-item h3{font-size:21px}
}

/* ---------- registros ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.filtro{
  border:1px solid var(--linha);background:var(--branco);color:var(--azul);
  border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:800;
  cursor:pointer;font-family:inherit;
}
.filtro[aria-pressed="true"]{background:var(--azul);color:#fff;border-color:var(--azul)}
.cards{display:grid;gap:14px}
.card{
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--branco);
  padding:22px;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--azul-mid)}
.card[data-eixo="campo"]::before{background:var(--amarelo-esc)}
.card[data-eixo="agenda"]::before{background:var(--azul-esc)}
.card small{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.card h3{margin:7px 0 8px;font-size:19.5px;line-height:1.2;letter-spacing:-.025em;font-weight:900}
.card p{margin:0;color:var(--cinza);font-size:15.5px}
.card-pe{margin-top:15px;padding-top:13px;border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.tag{
  background:var(--soft);border:1px solid var(--linha);border-radius:999px;
  padding:5px 12px;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--azul);
}
@media (min-width:760px){ .cards{grid-template-columns:1fr 1fr} }
@media (min-width:1060px){ .cards{grid-template-columns:repeat(3,1fr)} }

/* ---------- fecho ---------- */
.fecho{background:var(--azul);padding:44px 0 52px}
.fecho-card{
  background:var(--branco);border-radius:20px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.24);max-width:760px;margin:0 auto;
}
.fecho-visual img{width:100%}
.fecho-copy{padding:26px 24px 20px;text-align:center}
.fecho-copy p{
  margin:0 0 18px;font-size:clamp(19px,4.4vw,26px);line-height:1.24;
  font-weight:900;letter-spacing:-.03em;color:var(--tinta);
}
.fecho-copy p b{color:var(--azul-mid)}
.selo{
  display:inline-block;background:var(--azul);color:#fff;border-radius:999px;
  padding:13px 28px;font-weight:900;letter-spacing:.05em;font-size:15px;
}
.selo b{color:var(--amarelo)}
.countdown{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:0 20px 4px;
}
.count-item{border:1px solid var(--linha);border-radius:12px;padding:12px 4px;text-align:center;background:var(--soft)}
.count-num{display:block;font-size:clamp(22px,6vw,30px);font-weight:900;letter-spacing:-.03em;color:var(--tinta);line-height:1.05;font-variant-numeric:tabular-nums}
.count-label{display:block;margin-top:3px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--cinza)}
.count-foot{padding:14px 20px 22px;text-align:center;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-mid)}
/* fallback sem JS: o valor estático aparece; com JS o script assume */
.js-countdown .css-static-count{display:none}
html:not(.js-countdown) .js-count-value{display:none}

/* ---------- rodapé ---------- */
footer{background:var(--azul-esc);color:#B9CBD8;padding:38px 0 30px;font-size:14px}
footer .brand{color:#fff;font-size:19px}
footer .brand b{color:var(--amarelo)}
.legal{
  margin-top:18px;padding:18px 20px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  line-height:1.65;
}
.legal strong{color:#fff;display:block;margin-bottom:2px}
.legal .cnpj{display:block;margin-top:8px;color:#fff;font-weight:800}
.legal .nota{display:block;margin-top:8px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--azul-claro)}
.rodape-links{margin-top:20px;display:flex;flex-wrap:wrap;gap:16px}
.rodape-links a{color:#D7E4EC;font-size:13.5px}
@media (min-width:900px){
  footer .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start}
  .legal{margin-top:0}
}

/* ---------- 404 ---------- */
.erro{min-height:70vh;display:flex;align-items:center;text-align:center}
.erro h1{font-size:clamp(34px,9vw,62px);letter-spacing:-.045em;margin:0 0 12px}
.erro p{color:var(--cinza);font-size:18px;margin:0 0 26px}
.botao{
  display:inline-block;background:var(--azul);color:#fff;text-decoration:none;
  border-radius:999px;padding:14px 28px;font-weight:900;
}