/* Apuração ao vivo — tela principal
   Vidro gel: borda refratada, absorção interna e luz transmitida, inspiradas na referência.
   Luz do alto à direita; sombras para baixo e para a esquerda, tingidas pelo vidro. Mobile first. */

:root {
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Figtree", system-ui, sans-serif;
  --mola: cubic-bezier(.22, 1, .36, 1);
  --pos: 50%;    /* posição do placar no cabo (0–100%) */
  --proj: 50%;   /* posição da projeção no cabo */
  --flavio-curva: #b8ebcb;
  --flavio-texto: #d1f1dd;
}

* { box-sizing: border-box; margin: 0; }
::selection { background: rgba(10, 112, 200, .35); color: #fff; }
html { -webkit-text-size-adjust: 100%; background: #9aadb8; }
body {
  min-height: 100vh; min-height: 100svh;
  font-family: var(--fonte); color: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* fundo fosco: mais claro no alto à direita, mais escuro embaixo à esquerda (medido na referência) */
  background: linear-gradient(225deg, #c9d3dd 0%, #a6b5c1 38%, #8b9dab 70%, #768c9d 100%) fixed;
  overflow-x: clip;
}

/* ---------- palco ---------- */
.palco {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px;
  padding: max(24px, env(safe-area-inset-top)) 16px max(36px, env(safe-area-inset-bottom));
}
.placar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 14px; justify-content: center;
  width: 100%;
}
.transmissao, .bloco-principal { display: contents; }
.layout-transmissao, .nucleo-apuracao { display: contents; }
.enquadramento { display: contents; }
.controle-tela {
  position: fixed; top: 8px; right: 12px; z-index: 20;
  border: 1px solid rgba(255,255,255,.5); border-radius: 9px; padding: 7px 11px;
  background: rgba(228,239,246,.93); color: #233f52; font: 500 11px var(--fonte);
  box-shadow: -1px 3px 7px rgba(25,49,64,.15); cursor: pointer;
}
.controle-tela:focus-visible { outline: 2px solid #233f52; outline-offset: 3px; }
:fullscreen.controles-ocultos .controle-tela:not(:focus-visible) { opacity: 0; pointer-events: none; }
.aviso-visualizacao { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); width: max-content; padding: 12px 18px; border-radius: 12px; background: #eef4f8; color: #233f52; font-size: 14px; box-shadow: 0 4px 14px rgba(25,49,64,.2); }
.aviso-visualizacao a { color: inherit; font-weight: 600; }
@media (min-width: 1200px) {
  .enquadramento.ajuste-ativo { display: block; position: relative; flex: none; overflow: clip; overflow-clip-margin: 24px; }
  .enquadramento.ajuste-ativo > .layout-transmissao { transform-origin: top left; }
}

/* ---------- vidro espesso: absorção, refração e luz transmitida ---------- */
.peca {
  --h: 201; --k: 1;
  position: relative; isolation: isolate;
  container-type: inline-size;
}
.peca[data-n="13"] { --h: 4; }
.peca[data-n="22"] { --h: 148; --k: .82; }
.peca.neutra { --h: 207; --k: .48; width: 100%; max-width: 614px; }
/* Luz transmitida sob a peça; a sombra de contato permanece acima dela. */
.luz-projetada {
  position: absolute; inset: 0; z-index: 0; border-radius: 25cqi; pointer-events: none;
  transform: translate(-17px, 25px) scale(.97);
  background: radial-gradient(58% 31% at 36% 83%,
    hsla(var(--h), calc(var(--k) * 78%), 72%, .62),
    hsla(var(--h), calc(var(--k) * 65%), 64%, .18) 48%, transparent 78%);
  filter: blur(13px);
}
.neutra .luz-projetada { border-radius: 34px; transform: translate(-15px, 20px) scale(.98); }

.gel {
  --raio: 25cqi;
  --apice: 42deg;
  /* A espessura acompanha os cartões pequenos sem engrossar o painel largo. */
  --aresta: clamp(1.5px, .8cqi, 2.4px);
  --chanfro: clamp(3px, 1.8cqi, 5.4px);
  position: relative; isolation: isolate; z-index: 1;
  border-radius: var(--raio);
  color: #fff;
  --sombra-contato: -0.5px 1.5px 1.5px hsla(var(--h), calc(var(--k) * 55%), 20%, .38);
  --sombra-projetada: -6px 12px 10px hsla(var(--h), calc(var(--k) * 66%), 20%, .42);
  text-shadow: var(--sombra-contato), var(--sombra-projetada);
  background:
    /* Cáustica da base: luz concentrada, ainda tingida pelo material. */
    radial-gradient(70% 13% at 28% 102%, hsla(var(--h), calc(var(--k) * 69%), 81%, .65), transparent 82%),
    /* A curvatura abre a luz na parte superior, sem uma mancha branca. */
    radial-gradient(65% 58% at 77% 18%, hsla(var(--h), calc(var(--k) * 48%), 79%, .32), transparent 82%),
    radial-gradient(45% 48% at 9% 86%, hsla(var(--h), calc(var(--k) * 54%), 70%, .19), transparent 78%),
    /* Absorção no volume: a lateral esquerda e o topo interno são mais densos. */
    radial-gradient(64% 58% at 10% 61%, hsla(var(--h), calc(var(--k) * 57%), 30%, .3), transparent 86%),
    linear-gradient(180deg, hsla(var(--h), calc(var(--k) * 58%), 28%, .25), transparent 17%, transparent 83%, hsla(var(--h), calc(var(--k) * 54%), 34%, .12)),
    linear-gradient(112deg,
      hsla(var(--h), calc(var(--k) * 44%), 51%, .96),
      hsla(var(--h), calc(var(--k) * 43%), 54%, .94) 48%,
      hsla(var(--h), calc(var(--k) * 42%), 59%, .93));
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    /* Aro externo, filete refratado e região interna de maior espessura. */
    inset 0 0 0 var(--aresta) hsla(var(--h), calc(var(--k) * 60%), 48%, .78),
    inset 0 0 0 calc(var(--aresta) + 1px) hsla(var(--h), calc(var(--k) * 67%), 82%, .56),
    inset 0 0 0 calc(var(--aresta) + 3px) hsla(var(--h), calc(var(--k) * 58%), 57%, .24),
    inset 5px 4px 9px 3px hsla(var(--h), calc(var(--k) * 58%), 30%, .26),
    inset -3px -4px 8px 2px hsla(var(--h), calc(var(--k) * 62%), 76%, .22),
    0 0 0 .75px hsla(var(--h), calc(var(--k) * 50%), 40%, .45),
    0 2px 0 hsla(var(--h), calc(var(--k) * 58%), 73%, .64),
    0 3px 1px hsla(var(--h), calc(var(--k) * 48%), 33%, .35),
    /* É a sombra direcional que dá peso à peça. */
    7px -6px 16px -6px hsla(var(--h), calc(var(--k) * 36%), 92%, .32),
    -7px 6px 10px -1px hsla(var(--h), calc(var(--k) * 42%), 22%, .46),
    -19px 23px 29px -5px hsla(var(--h), calc(var(--k) * 40%), 25%, .43);
}
/* O chanfro alterna luz e absorção: não é uma fita branca uniforme. */
.gel::before,
.gel::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.gel::before {
  inset: calc(var(--aresta) + 1px);
  border-radius: calc(var(--raio) - var(--aresta) - 1px);
  padding: var(--chanfro);
  background: conic-gradient(from 0deg,
    hsla(var(--h), calc(var(--k) * 65%), 34%, .2),
    hsla(var(--h), calc(var(--k) * 38%), 89%, .62) var(--apice),
    hsla(var(--h), calc(var(--k) * 55%), 63%, .16) calc(var(--apice) + 26deg),
    hsla(var(--h), calc(var(--k) * 60%), 30%, .2) 145deg,
    hsla(var(--h), calc(var(--k) * 65%), 78%, .26) 188deg,
    hsla(var(--h), calc(var(--k) * 55%), 86%, .64) 222deg,
    hsla(var(--h), calc(var(--k) * 56%), 62%, .08) 260deg,
    hsla(var(--h), calc(var(--k) * 60%), 32%, .23) 310deg,
    hsla(var(--h), calc(var(--k) * 65%), 34%, .2));
  filter: blur(1.8px);
}
/* O fio especular acompanha a curva e varia de intensidade com a luz. */
.gel::after {
  inset: var(--aresta);
  border-radius: calc(var(--raio) - var(--aresta));
  padding: clamp(.75px, .42cqi, 1.25px);
  background: conic-gradient(from 0deg,
    hsla(var(--h), 60%, 89%, .18),
    hsla(var(--h), 45%, 96%, .93) var(--apice),
    hsla(var(--h), 60%, 83%, .2) calc(var(--apice) + 35deg),
    hsla(var(--h), 65%, 62%, .05) 140deg,
    hsla(var(--h), 65%, 85%, .58) 184deg,
    hsla(var(--h), 50%, 96%, .95) 222deg,
    hsla(var(--h), 65%, 84%, .23) 270deg,
    hsla(var(--h), 65%, 78%, .08) 320deg,
    hsla(var(--h), 60%, 89%, .18));
}
.gel .conteudo { position: relative; z-index: 4; }
/* Luz difusa dentro do vidro, preservando a cor do material. */
.gel .conteudo::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 48%; height: 22%; z-index: -1; pointer-events: none;
  border-bottom-left-radius: var(--raio);
  background: radial-gradient(70% 50% at 12% 92%, hsla(var(--h), calc(var(--k) * 64%), 82%, .3), transparent 100%);
}
/* ---------- cartão do candidato: nome, foto, percentual e votos ---------- */
.cartao { aspect-ratio: 262 / 292; animation: surge .9s var(--mola) both; }
.peca[data-n="22"] .cartao { animation-delay: .07s; }
@keyframes surge { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.cartao .conteudo {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3cqi; padding: 7cqi 6cqi 9cqi;
}
.nome { font-size: max(13px, 8cqi); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; text-align: center; }
/* a foto flutua sobre o vidro: sombra de contato + sombra projetada através do gel */
.retrato {
  display: block; width: 36cqi; height: 36cqi; border-radius: 50%;
  object-fit: cover; object-position: 50% 30%;
  border: max(1.5px, .75cqi) solid rgba(255, 255, 255, .85);
  box-shadow:
    0 0 0 .5px hsla(var(--h), 40%, 25%, .25),
    -2px 4px 5px hsla(var(--h), 55%, 20%, .34),
    -13px 20px 20px -4px hsla(var(--h), 68%, 19%, .5);
}
/* percentual grande e, logo abaixo, os votos com a mesma largura dele (total à esquerda, "votos" à direita) */
.placar-num { display: flex; flex-direction: column; margin-top: 1cqi; transition: opacity .6s ease; }
.cartao.atras .placar-num { opacity: .72; }
.pct {
  display: flex; align-items: baseline; line-height: .95;
  font-weight: 300; letter-spacing: -.03em; font-variant-numeric: proportional-nums;
}
.pct-int { font-size: 30cqi; }

/* ---------- percentual em placas estilo painel de aeroporto (sem a caixa: só o algarismo partido) ---------- */
/* com placas, a sombra sai do número montado (cada metade recortada cortaria a própria sombra) */
.com-placas .pct { text-shadow: none; filter: drop-shadow(var(--sombra-contato)) drop-shadow(-6px 12px 9px hsla(var(--h), 66%, 20%, .42)); }
.flap {
  position: relative; display: inline-block; width: .6em; text-align: center; line-height: 1;
  --dur: 190ms; --fresta: max(.6px, .012em);
  transition: width calc(var(--dur) * 2) var(--mola);   /* a placa acompanha a largura do novo algarismo */
}
.flap.oculto { display: none; }
.f-base { visibility: hidden; display: block; letter-spacing: 0; }             /* dá a largura, a altura e a linha de base */
.f-meia { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
.f-cima { top: 0; clip-path: inset(0 0 var(--fresta) 0); }   /* a fresta fina que parte o algarismo */
.f-baixo { bottom: 0; clip-path: inset(var(--fresta) 0 0 0); }
.f-txt { position: absolute; left: 0; right: 0; height: 200%; text-align: center; }
.f-cima .f-txt { top: 0; }
.f-baixo .f-txt { bottom: 0; }
/* folhas: só aparecem durante a virada; a de cima tomba pela dobra, a de baixo desce no lugar */
.f-folha { visibility: hidden; backface-visibility: hidden; will-change: transform; }
.f-folha-cima { transform-origin: 50% 100%; }
.f-folha-baixo { transform-origin: 50% 0; transform: perspective(3em) rotateX(90deg); }
.virando .f-folha { visibility: visible; }
.virando .f-folha-cima { animation: placa-cai var(--dur) cubic-bezier(.55, 0, .9, .45) forwards; }
.virando .f-folha-baixo { animation: placa-desce var(--dur) cubic-bezier(.1, .55, .45, 1) var(--dur) forwards; }
/* a placa escurece enquanto gira: deixa de receber a luz de frente */
@keyframes placa-cai {
  from { transform: perspective(3em) rotateX(0); filter: brightness(1); }
  to { transform: perspective(3em) rotateX(-90deg); filter: brightness(.55); }
}
@keyframes placa-desce {
  from { transform: perspective(3em) rotateX(90deg); filter: brightness(.55); }
  to { transform: perspective(3em) rotateX(0); filter: brightness(1); }
}
.pct small { font-size: 15cqi; font-weight: 300; letter-spacing: -.01em; }
/* a linha dos votos não define a largura: ela se estica até a do percentual */
.votos-just {
  width: 0; min-width: 100%; display: flex; justify-content: space-between; align-items: baseline;
  gap: 4px; margin-top: 2cqi; white-space: nowrap;
}
.votos-just .odometro { font-size: max(11px, 6.6cqi); font-weight: 600; }
.votos-just .rotulo { font-size: max(9px, 4.6cqi); font-weight: 400; opacity: .82; }

/* ---------- odômetro: os votos correm voto a voto ---------- */
.odometro {
  display: inline-flex; height: 1.15em; overflow: hidden; letter-spacing: 0;
  /* a sombra sai do número já recortado: se cada dígito da fita fizesse a sua, as sombras dos dígitos
     escondidos (acima e abaixo) vazariam para dentro da janela e formariam retângulos escuros */
  text-shadow: none;
  filter: drop-shadow(-0.5px 1.5px 1px hsla(var(--h), 55%, 20%, .38)) drop-shadow(-5px 10px 8px hsla(var(--h), 66%, 20%, .4));
}
.dg { position: relative; width: .62em; height: 1.15em; overflow: hidden; display: inline-block; }
.dg .fita { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; will-change: transform; }
.dg .fita span { height: 1.15em; line-height: 1.15em; text-align: center; display: block; font-variant-numeric: proportional-nums; }
.dg.lento .fita { transition: transform .5s var(--mola); }
.dg.rapido .fita { filter: blur(.3px); }
.dg.oculto, .sep.oculto { display: none; }
.sep { width: .26em; display: inline-block; text-align: center; line-height: 1.15em; }

/* ---------- módulo do cabo de força (vidro neutro) ---------- */
.cabo { --raio: 34px; --apice: 74deg; animation: surge .9s var(--mola) .14s both; }
.cabo .conteudo { padding: 20px 22px 18px; }
.diferenca { position: relative; text-align: center; margin-bottom: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
.diferenca > .dif-rot, .diferenca > .dif-num { grid-column: 1 / -1; }
.diferenca > .dif-rot { grid-row: 1; }
.diferenca > .dif-num { grid-row: 2; }
.sinal { grid-row: 3; margin-top: 10px; max-width: 140px; color: #fff; }
.sinal-lula { grid-column: 1; justify-self: start; }
.sinal-flavio { grid-column: 2; justify-self: end; }
.sinal-barras { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 28px; }
.sinal-flavio .sinal-barras { flex-direction: row-reverse; }
.sinal-barras span { width: 6px; height: 6px; border-radius: 1.5px; background: #fff; opacity: .18; transition: opacity .35s ease; }
.sinal-barras span:nth-child(2) { height: 11px; }
.sinal-barras span:nth-child(3) { height: 16px; }
.sinal-barras span:nth-child(4) { height: 22px; }
.sinal-barras span:nth-child(5) { height: 28px; }
.sinal-nome { display: block; margin-top: 5px; font-size: 10px; line-height: 1.35; font-weight: 400; color: rgba(255,255,255,.85); white-space: normal; }
.sinal-lula .sinal-nome { text-align: left; }
.sinal-flavio .sinal-nome { text-align: right; }
@media (max-width: 400px) {
  .sinal-barras { gap: 2px; }
  .sinal-barras span { width: 5px; }
}
@media (min-width: 760px) {
  .diferenca { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .diferenca > .dif-rot, .diferenca > .dif-num { grid-column: 2; }
  .sinal { grid-row: 1 / 3; margin-top: 0; }
  .sinal-flavio { grid-column: 3; }
}
/* "Pró Fulano": o tamanho é calculado (app.js) para a frase mais longa ter a largura de um número de
   6 dígitos; a mais curta usa o mesmo tamanho, centralizada */
.dif-rot { font-size: 13px; font-weight: 500; line-height: 1.15; white-space: nowrap; min-height: 1.15em; }
.dif-pro.vazio { visibility: hidden; }
.dif-quem { font-weight: 600; }
.diferenca[data-lider="13"] .dif-quem { color: #ffd2cd; }
.diferenca[data-lider="22"] .dif-quem { color: var(--flavio-texto); }
.dif-num { display: flex; justify-content: center; margin-top: 2px; }
.dif-num .odometro { font-size: clamp(24px, 7vw, 32px); font-weight: 600; letter-spacing: -.02em; }

/* o trilho é um sulco no vidro; as cordas são tubos de gel vermelho e verde */
.trilho {
  position: relative; height: 16px; border-radius: 999px;
  background: hsla(212, 22%, 26%, .32);
  box-shadow: inset 0 2px 4px hsla(212, 30%, 15%, .45), inset 0 -1px 0 rgba(255, 255, 255, .28), 0 1px 0 rgba(255, 255, 255, .22);
}
.corda { position: absolute; inset: 0; border-radius: 999px; transition: clip-path 1.1s var(--mola); }
.corda-13 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, 0) 45%),
    linear-gradient(90deg, hsl(4, 58%, 54%), hsl(4, 66%, 58%));
  box-shadow: inset 0 -2px 3px hsla(4, 60%, 25%, .4);
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.corda-22 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, 0) 45%),
    linear-gradient(90deg, hsl(148, 39%, 48%), hsl(148, 36%, 41%));
  box-shadow: inset 0 -2px 3px hsla(148, 40%, 20%, .4);
  clip-path: inset(0 0 0 var(--pos));
}
.meio { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; margin-left: -.5px; background: rgba(255, 255, 255, .55); }
.meio span {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; opacity: .85;
}
/* onde o placar está agora: traço sólido e fino, com sombra de verdade */
.no {
  position: absolute; left: var(--pos); top: -11px; bottom: -11px; width: 3px; margin-left: -1.5px; border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 .5px hsla(212, 30%, 25%, .4), -2px 3px 4px hsla(212, 40%, 18%, .45);
  transition: left 1.1s var(--mola);
}
.espera { text-align: center; font-size: 13px; margin-top: 12px; }
.espera[hidden] { display: none; }

/* ---------- selo do modo demonstração (some na noite da eleição) ---------- */
.selo-demo {
  max-width: 100%; text-align: center; line-height: 1.4; text-wrap: balance;
  padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(180deg, hsla(212, 18%, 70%, .7), hsla(212, 16%, 58%, .7));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 1px hsla(212, 20%, 45%, .4), -4px 6px 12px -4px hsla(212, 35%, 22%, .45);
  text-shadow: -0.5px 1px 1px hsla(212, 40%, 20%, .4);
}
.selo-demo[hidden] { display: none; }
html[data-transmissor="1"] .fonte-oficial,
html[data-transmissor="1"] .controle-tela,
html[data-transmissor="1"] .locucao-controle { display: none !important; }

/* ---------- transmissão: duas curvas e uma referência oficial discreta ---------- */
.rotulo-placar { font-size: 12px; color: #233f52; text-align: center; margin-block: -8px; }
.momento { margin-top: 15px; min-height: 2.6em; text-align: center; font-size: 12px; line-height: 1.3; text-wrap: balance; }
.historico, .ticker, .mensagens {
  --raio: 34px; --apice: 65deg;
  background:
    radial-gradient(80% 40% at 90% 0%, rgba(157, 200, 220, .24), transparent 80%),
    radial-gradient(70% 16% at 10% 100%, rgba(142, 209, 233, .23), transparent 80%),
    linear-gradient(115deg, rgba(42, 75, 97, .97), rgba(63, 98, 122, .96));
  text-shadow: 0 1px 2px rgba(16, 42, 61, .38);
}
.historico .conteudo { padding: 21px 18px 17px; }
.graf-cabecalho h2 { font-size: clamp(18px, 5.3cqi, 23px); font-weight: 500; letter-spacing: -.02em; }
.graf-legenda { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 11px; color: #f0f7fb; white-space: nowrap; }
.graf-legenda > span { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.graf-legenda .graf-evento { display: block; margin-left: auto; min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; font-size: 9px; color: #d1e3ef; }
.graf-legenda .graf-evento[hidden] { display: none; }
@media (max-width: 420px) {
  .graf-legenda { gap: 8px; font-size: 10px; }
  .graf-legenda > span { gap: 4px; }
  .graf-legenda i { max-width: 12px; }
}
.graf-legenda i { display: inline-block; width: 17px; border-top: 2.5px solid; }
.amostra-13 { color: #ffb2a8; }
.amostra-22 { color: var(--flavio-curva); }
.historico svg { display: block; width: 100%; overflow: visible; }
.historico svg text { fill: #e5f0f7; font: 500 10px var(--fonte); text-shadow: none; }
.historico path, .historico line, .historico circle { vector-effect: non-scaling-stroke; }
.graf-grade { stroke: rgba(224, 242, 252, .12); stroke-width: 1; }
.graf-empate { stroke: rgba(240, 250, 255, .5); stroke-width: 1; stroke-dasharray: 3 5; }
.graf-candidato-13, .graf-candidato-22, .graf-linha-progresso { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.graf-candidato-13 { stroke: #ffb2a8; stroke-width: 2.3; }
.graf-candidato-22 { stroke: var(--flavio-curva); stroke-width: 2.3; }
.graf-candidato-13.graf-ponto { fill: #ffb2a8; stroke-width: 0; }
.graf-candidato-22.graf-ponto { fill: var(--flavio-curva); stroke-width: 0; }
.historico .graf-valor-13 { fill: #ffb2a8; font-size: 11px; font-weight: 600; }
.historico .graf-valor-22 { fill: var(--flavio-curva); font-size: 11px; font-weight: 600; }
.graf-virada { stroke: rgba(240, 250, 255, .4); stroke-width: 1; stroke-dasharray: 2 4; }
.graf-progresso-titulo { margin: 10px 0 5px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11px; }
.graf-progresso-titulo strong { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.graf-linha-progresso { stroke: #c4e2f0; stroke-width: 1.3; }
.graf-area-progresso { fill: rgba(151, 218, 248, .15); }
.fonte-oficial {
  display: flex; align-items: baseline; gap: 16px;
  width: 100%; max-width: 614px; min-width: 0;
  overflow-x: auto; white-space: nowrap;
  color: #233f52; font-size: 10px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  scrollbar-width: thin; scrollbar-color: rgba(35,63,82,.3) transparent;
}
.fonte-oficial p { flex: none; }
.fonte-oficial > p:first-child { margin-left: auto; }
.fonte-oficial > p:last-child { margin-right: auto; }
.fonte-oficial:focus-visible { outline: 1px solid #233f52; outline-offset: 4px; }
.tse-votos { display: contents; }
.nota-modelo { font-size: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Faixa de estados: largura alinhada aos módulos, movimento só por transform. */
.ticker {
  --raio: 20px; display: flex; align-items: stretch; overflow: hidden;
  text-shadow: -.4px 1px 1.5px rgba(16,42,61,.16);
}
.ticker-titulo { flex: 0 0 88px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-left: 17px; border-right: 1px solid rgba(224,242,252,.18); }
.ticker-titulo strong { font-size: 12px; font-weight: 600; }
.ticker-titulo span { font-size: 9px; color: #d1e3ef; }
.ticker-janela { min-width: 0; flex: 1; overflow: hidden; padding-block: 14px; }
.ticker-janela:focus-visible { outline: 2px solid #b1e4ff; outline-offset: -5px; border-radius: 16px; }
.estados-trilha { display: flex; width: max-content; animation: estados-rolagem 354.375s linear infinite; }
.estados-grupo { display: flex; flex: none; list-style: none; padding: 0; }
.estado-item { display: flex; align-items: center; gap: 14px; flex: 0 0 420px; width: 420px; padding: 0 20px; border-right: 1px solid rgba(224,242,252,.18); font-variant-numeric: tabular-nums; }
.estado-dados { flex: 1; min-width: 0; }
.estado-curvas { flex: 0 0 84px; width: 84px; height: 36px; overflow: visible; }
.estado-curvas path { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.estado-empate { stroke: rgba(255,255,255,.3); stroke-dasharray: 2 3; }
.estado-curva-13 { stroke: #ffb2a8; }
.estado-curva-22 { stroke: var(--flavio-curva); }
.estado-ponto-13 { fill: #ffb2a8; }
.estado-ponto-22 { fill: var(--flavio-curva); }
.estado-placar { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 12px; }
.estado-placar abbr { font-size: 14px; font-weight: 700; text-decoration: none; }
.estado-lula { color: #ffc3ba; }
.estado-flavio { color: var(--flavio-texto); }
.estado-total { font-size: 10px; color: #d1e3ef; margin: 5px 0 0 22px; white-space: nowrap; }
.estado-led { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #8195a4; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
[data-lider="13"] .estado-led { background: radial-gradient(circle at 35% 30%, #fff0e9, #ff726c 40%, #d52d36 80%); box-shadow: 0 0 4px #ff6a60, 0 0 10px rgba(255,79,73,.7); }
[data-lider="22"] .estado-led { background: radial-gradient(circle at 35% 30%, #f1fff5, #83d8a2 40%, #34895a 80%); box-shadow: 0 0 4px #83d8a2, 0 0 9px rgba(91,191,129,.55); }
[data-lider="empate"] .estado-led { background: #ecf4f8; box-shadow: 0 0 6px rgba(230,245,255,.5); }
.ticker:hover .estados-trilha, .ticker:focus-within .estados-trilha { animation-play-state: paused; }
@keyframes estados-rolagem { to { transform: translateX(-50%); } }
@media (max-width: 759px) {
  .ticker-titulo { flex-basis: 66px; padding-left: 11px; }
  .ticker-titulo strong { font-size: 10px; }
  .ticker-titulo span { font-size: 8px; }
}
@media (min-width: 760px) {
  .historico .conteudo { padding: 22px 30px 17px; }
  .graf-legenda { font-size: 12px; }
}
/* ---------- telas maiores ---------- */
@media (min-width: 760px) {
  .palco { gap: 20px; }
  .placar { gap: 20px; }
  .cabo .conteudo { padding: 26px 34px 22px; }
  .trilho { height: 20px; }
  .no { top: -13px; bottom: -13px; }

}

@media (min-width: 1100px) {
  .transmissao {
    display: grid;
    grid-template-columns: minmax(0, 614px) minmax(0, 530px);
    gap: 28px;
    width: 100%; max-width: 1172px;
    align-items: stretch;
  }
  .bloco-principal { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .bloco-grafico { min-width: 0; }
  .bloco-grafico .historico, .bloco-grafico .conteudo { height: 100%; }
  .bloco-grafico .conteudo { display: flex; flex-direction: column; }
  .bloco-grafico #graf-principal { flex: 1 1 0; min-height: 150px; height: 0; }
  .bloco-grafico #graf-progresso { flex: 0 0 55px; height: 55px; }
  .peca.faixa-estados { max-width: 1172px; }
}

/* Mensagens: o mesmo vidro do gráfico, com espaço para leitura de cada publicação. */
.peca.mensagens-lateral { height: 620px; min-width: 0; }
.mensagens, .mensagens > .conteudo { height: 100%; }
.mensagens {
  text-shadow: -.6px 1.5px 2px rgba(16,42,61,.18);
}
.mensagens .mensagem-identidade, .mensagens-cabecalho > p, .mensagens-rodape {
  text-shadow: -.3px .8px 1.2px rgba(16,42,61,.12);
}
.mensagens > .conteudo { display: flex; flex-direction: column; min-height: 0; }
.mensagens-cabecalho { padding: 20px 24px 14px; flex: none; }
.mensagens-cabecalho h2 { font-size: 26px; line-height: 1.18; font-weight: 600; letter-spacing: -.02em; }
.mensagens-cabecalho > p { margin-top: 6px; color: #d1e3ef; font-size: 12px; }
.placar-mensagens { flex: none; margin: 0 14px 18px; padding: 14px 18px 10px; border-radius: 20px; background: linear-gradient(135deg,rgba(212,233,240,.24),rgba(212,233,240,.07)); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 1px rgba(208,230,239,.24), 0 4px 9px rgba(12,36,50,.12); }
.placar-mensagens h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.placar-ficticias { display: inline-block; font-size: 11px; font-weight: 500; color: #e4f0f6; margin-left: 6px; }
.placar-mensagens-numeros { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.placar-mensagens-numeros > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.placar-mensagens-numeros .apoio-flavio { text-align: right; }
.placar-mensagens-numeros span { font-size: 13px; }
.placar-mensagens-numeros strong { font-size: 44px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 2px 3px rgba(15,36,49,.18); }
.apoio-lula { color: #ffd4ce; }.apoio-flavio { color: #c9f4da; }
.placar-versus { color: #e4eff5; }
.placar-mensagens-barra { display: flex; height: 9px; margin-top: 12px; overflow: hidden; border-radius: 5px; background: rgba(222,237,246,.18); box-shadow: inset 0 1px 2px rgba(14,34,47,.25); }
.placar-mensagens-barra i { display: block; width: 0; }
#placar-faixa-lula { background: #e9968b; }#placar-faixa-flavio { background: #8dcda6; }
.placar-mensagens p { font-size: 10px; line-height: 1.3; color: #e0edf3; margin: 7px 0; text-shadow: none; }
.placar-participar { display: flex; flex: none; justify-content: space-between; align-items: center; min-height: 34px; margin: 6px 24px 0; color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
.mensagem-ficticia { display: inline; font-size: 10px; font-weight: 500; margin-left: 6px; }
.placar-participar:hover { text-decoration: underline; text-underline-offset: 3px; }
.placar-participar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.mensagens-janela { display: none; }
@media (max-width: 1199px) {
  .peca.mensagens-lateral { height: auto; min-height: 620px; }
  .mensagens, .mensagens > .conteudo { height: auto; }
  .mensagem-destaque { min-height: 280px; }
}
.mensagens-janela:focus-visible { outline: 2px solid #b1e4ff; outline-offset: -3px; border-radius: 10px; }
.mensagens-grupo { list-style: none; padding: 0; }
.mensagem { height: var(--mensagem-altura, 150px); padding-block: 12px; border-top: 1px solid rgba(224,242,252,.19); }
.mensagem-identidade { display: flex; gap: 10px; align-items: center; }
.mensagem-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: rgba(196,226,240,.14); box-shadow: inset 0 0 0 1px rgba(224,242,252,.32); color: #f0f7fb; font-size: 11px; font-weight: 600; }
.mensagem-identidade strong { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.mensagem-identidade div > span { display: block; margin-top: 3px; color: #d1e3ef; font-size: 10px; }
.mensagem > p { margin-top: 8px; font-size: 13px; line-height: 1.45; color: #f4f9fc; overflow-wrap: anywhere; }
.mensagens-rodape { flex: none; padding: 12px 20px 18px; text-align: center; color: #d1e3ef; font-size: 10px; }
/* Área de toque de 44px; a lente de vidro permanece discreta, com 32px. */
.locucao-controle {
  position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 100; display: grid; place-items: center; isolation: isolate;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #f3f9fc; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.locucao-controle[hidden] { display: none; }
.locucao-controle .locucao-rotulo { display: none; }
@media (max-width: 767px) {
  .locucao-controle[data-bloqueado="1"] { width: 210px; height: 56px; border-radius: 28px; display: flex; justify-content: center; gap: 8px; font: 600 15px system-ui; }
  .locucao-controle[data-bloqueado="1"] .locucao-rotulo { display: inline; }
}
@media (min-width: 768px) {
  .locucao-controle { display: none; }
}
.locucao-controle::before {
  content: ""; position: absolute; inset: 6px; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(85% 65% at 78% 12%, rgba(229,244,252,.4), transparent 78%),
    linear-gradient(145deg, rgba(67,102,123,.84), rgba(91,129,150,.76));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(211,235,248,.65),
    inset 0 2px 2px rgba(240,250,255,.35), inset 0 -2px 3px rgba(28,60,80,.24),
    -2px 4px 7px rgba(24,49,65,.24);
  transition: filter 160ms ease-out, transform 160ms ease-out;
}
.locucao-controle::after {
  content: ""; position: absolute; inset: 8px; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(224,242,251,.22); border-top-color: rgba(245,252,255,.55);
  border-bottom-color: rgba(201,233,248,.4); transition: transform 160ms ease-out;
}
.locucao-controle svg {
  width: 16px; height: 16px; fill: currentColor; transform: translateX(.4px);
  filter: drop-shadow(0 1px 1px rgba(19,48,66,.25)); pointer-events: none;
}
@media (hover: hover) {
  .locucao-controle:hover::before { filter: brightness(1.1); }
}
.locucao-controle:active::before, .locucao-controle:active::after { transform: scale(.94); }
.locucao-controle:focus-visible { outline: 2px solid #31546a; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .locucao-controle::before, .locucao-controle::after { transition: none; }
}
.mensagem-destaque {
  flex: 1; margin: 0 14px 18px; padding: 22px; min-height: 260px; border-radius: 24px;
}
.vidro-claro {
  /* Núcleo fosco legível; periferia mais translúcida, com luz vindo do alto à direita. */
  background:
    radial-gradient(62% 8% at 28% 100%, rgba(255,255,255,.9), transparent 84%),
    radial-gradient(75% 48% at 100% 0%, rgba(255,255,255,.78), transparent 76%),
    radial-gradient(95% 85% at 48% 42%, rgba(255,255,255,.54), transparent 85%),
    linear-gradient(118deg, rgba(219,235,242,.62), rgba(248,252,254,.78) 48%, rgba(219,236,244,.58));
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
  color: #151a1e;
  text-shadow: -.5px 1.5px 2px rgba(38,67,82,.12);
  box-shadow:
    inset 0 0 0 .75px rgba(236,249,255,.65),
    inset 2px 3px 3px rgba(72,110,133,.18),
    inset -1px -2px 2px rgba(255,255,255,.8),
    inset 7px 0 12px -7px rgba(66,108,135,.3),
    inset -7px -5px 14px -10px rgba(255,255,255,.9),
    1px -1px 0 rgba(236,249,255,.3),
    -1px 2px 2px rgba(16,43,60,.26),
    -6px 10px 18px -7px rgba(12,37,54,.46);
  position: relative; isolation: isolate; z-index: 2;
}
.vidro-claro::before, .vidro-claro::after {
  content: ""; position: absolute; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.vidro-claro::before {
  inset: 1.5px; padding: 7px; border-radius: 22.5px;
  background: conic-gradient(from 0deg, rgba(72,110,135,.12), rgba(255,255,255,.7) 38deg, rgba(244,253,255,.14) 76deg, rgba(91,133,158,.22) 140deg, rgba(245,252,255,.12) 180deg, rgba(255,255,255,.72) 224deg, rgba(187,218,233,.08) 270deg, rgba(72,110,135,.12));
  filter: blur(1.4px);
}
.vidro-claro::after {
  inset: .75px; padding: 1px; border-radius: 23.25px;
  background: conic-gradient(from 0deg, rgba(255,255,255,.14), #fff 42deg, rgba(255,255,255,.3) 80deg, rgba(115,158,181,.12) 144deg, rgba(255,255,255,.96) 222deg, rgba(255,255,255,.18) 268deg, rgba(105,149,174,.22) 315deg, rgba(255,255,255,.14));
}
.mensagem-destaque .mensagem { height: auto; padding: 0; border: 0; }
.mensagem-destaque .mensagem-identidade {
  text-shadow: -.25px .7px 1px rgba(38,67,82,.08);
}
.mensagem-destaque .mensagem-avatar { width: 40px; height: 40px; background: rgba(65,94,112,.1); color: #252e35; box-shadow: inset 0 0 0 1px rgba(65,94,112,.2); }
.mensagem-destaque .mensagem-identidade strong { font-size: 16px; color: #151a1e; }
.mensagem-destaque .mensagem-identidade div > span { font-size: 12px; color: #414b53; }
.mensagem-destaque .mensagem > p { margin-top: 20px; font-size: 22px; line-height: 1.38; font-weight: 500; font-style: italic; letter-spacing: -.01em; color: #151a1e; }
@media (min-width: 1200px) {
  .layout-transmissao { display: grid; grid-template-columns: minmax(0, 1092px) minmax(360px, 400px); gap: 20px 24px; align-items: stretch; width: 100%; max-width: 1516px; }
  .nucleo-apuracao { display: contents; }
  .layout-transmissao .transmissao { grid-column: 1; grid-row: 2; }
  .layout-transmissao .faixa-estados { grid-column: 1; grid-row: 3; }
  .layout-transmissao .fonte-oficial { grid-column: 1 / -1; grid-row: 4; max-width: none; }
  .peca.mensagens-lateral { grid-column: 2; grid-row: 2 / 4; max-width: none; height: auto; min-height: 0; contain: size; }
}
/* Faixa comercial: mesmo alinhamento dos módulos e material claro na chamada. */
.banner-vidro { --raio: 24px; min-height: 176px; }
.banner-vidro .conteudo { height: 100%; display: grid; grid-template-columns: minmax(0,1fr) 320px; padding: 0; }
.banner-anuncio { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 22px 30px 32px; }
.banner-chamada { font-size: clamp(23px, 3vw, 32px); font-weight: 500; letter-spacing: -.025em; }
.banner-descricao { margin-top: 6px; font-size: 12px; color: #e3edf4; }
.banner-identificacao { position: absolute; bottom: 12px; right: 22px; font-size: 9px; color: #d1e3ef; text-shadow: none; }
.inicio-apuracao { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 16px 24px; color: #f5fbff; text-shadow: -1px 2px 3px rgba(25,49,66,.25); }
.inicio-apuracao::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 0; width: 1px; background: rgba(223,243,252,.45); box-shadow: -1px 0 1px rgba(35,67,86,.25), 1px 0 1px rgba(255,255,255,.2); }
.cronometro-intro { white-space: nowrap; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.cronometro-digital { display: flex; align-items: flex-start; gap: 7px; }
.cronometro-par { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cronometro-algarismos { display: flex; gap: 3px; filter: drop-shadow(-1px 3px 2px rgba(21,43,59,.32)); }
.cronometro-algarismos svg { display: block; height: 34px; width: 21px; overflow: visible; }
.cronometro-segmento { fill: currentColor; opacity: .07; }
.cronometro-segmento.aceso { opacity: 1; }
.cronometro-unidade { font-size: 8px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: #e5f1f7; }
.cronometro-separador { height: 34px; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding-inline: 1px; }
.cronometro-separador::before, .cronometro-separador::after { content: ""; width: 3px; height: 3px; background: currentColor; box-shadow: -1px 2px 2px rgba(21,43,59,.3); }
.modo-transmissao { display: flex; align-items: center; gap: 9px; margin-top: 12px; min-height: 24px; font-size: 12px; font-weight: 600; line-height: 1.25; }
.modo-chave { flex: none; position: relative; display: flex; align-items: center; width: 58px; height: 24px; border-radius: 16px; padding-left: 8px; background: linear-gradient(145deg,#b5d0df,#8db2c7); color: #26495c; font-size: 10px; letter-spacing: .04em; text-shadow: 0 1px rgba(255,255,255,.35); box-shadow: inset 0 1px 2px rgba(28,61,82,.28), inset 0 -1px 1px rgba(255,255,255,.6), -1px 2px 4px rgba(24,51,69,.2); }
.modo-chave i { position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(140deg,#fff,#dcebf2); box-shadow: inset 0 1px 1px #fff, -1px 2px 3px rgba(27,57,74,.28); }
.modo-transmissao[data-modo="aovivo"] .modo-chave { background: linear-gradient(145deg,#c6e4d6,#94bda9); }
@media (max-width: 699px) {
  .banner-vidro .conteudo { grid-template-columns: 1fr; }
  .banner-anuncio { min-height: 140px; padding-inline: 24px; }
  .inicio-apuracao { padding: 18px 24px 22px; }
  .inicio-apuracao::before { top: 0; bottom: auto; left: 24px; right: 24px; width: auto; height: 1px; }
}
.participar { display: grid; grid-template-columns: minmax(0, 1fr) 144px; align-items: center; gap: 10px; min-height: 176px; height: 100%; padding: 16px; border-radius: 24px; }
.participar-texto { position: relative; z-index: 1; }
.participar h2 { font-size: 19px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; text-shadow: none; }
.participar p { margin-top: 6px; font-size: 11px; line-height: 1.3; color: #354956; text-shadow: none; }
.participar-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none;
  margin-top: 10px; min-height: 36px; padding: 8px 13px; border: 0; border-radius: 11px;
  background: linear-gradient(155deg, #526e80, #2d485b); color: #fff;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 1px rgba(15,38,54,.35), -1px 3px 5px rgba(30,58,76,.2);
  font: 600 12px var(--fonte); cursor: pointer;
  transition: filter .2s, transform .2s;
}
.participar-botao:hover { filter: brightness(1.12); }
.participar-botao:active { transform: translateY(1px); }
.participar-botao:focus-visible { outline: 2px solid #233f52; outline-offset: 3px; }
.participar .participar-botao { padding-inline: 8px; font-size: 11px; }
.participar-qr {
  width: 144px; aspect-ratio: 1; display: grid; place-items: center; position: relative;
  border-radius: 8px; background: #fff; color: #334b5b; text-align: center; text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(69,100,119,.16), 0 2px 4px rgba(30,58,76,.12);
}
.participar-dialogo { position: fixed; inset: 0; margin: auto; padding: 30px; width: min(440px, calc(100% - 32px)); height: fit-content; max-height: calc(100% - 32px); overflow-y: auto; border: 0; border-radius: 24px; font-family: var(--fonte); text-shadow: none; }
.participar-dialogo::backdrop { background: rgba(21,43,58,.45); backdrop-filter: blur(5px); }
.participar-dialogo h2 { font-size: 24px; line-height: 1.2; font-weight: 500; }
.participar-dialogo p { margin: 14px 0 10px; line-height: 1.5; font-size: 15px; }
@media (min-width: 1200px) {
  .peca.banner-publicitario { grid-column: 1; grid-row: 1; max-width: none; }
  .peca.chamada-participacao { grid-column: 2; grid-row: 1; max-width: none; }
  .banner-vidro { height: 100%; min-height: 152px; }
}
@media (prefers-reduced-motion: reduce) {
  .mensagens-grupo[aria-hidden="true"] { display: none; }
  .ticker-janela { overflow-x: auto; scrollbar-width: thin; }
  .estados-grupo[aria-hidden="true"] { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.participar-qr img { display: block; width: 100%; height: 100%; border-radius: 8px; }
.participar-qr:focus-visible { outline: 2px solid #233f52; outline-offset: 3px; }