/* Urna de Treino · v2
   Layout: Apple-style product page. A floating capsule nav; a black hero where a giant chrome "URNA"
   sits behind the machine, which is the centrepiece and the whole flow (progress + guide right under it);
   then statement, cola, fidelity features, the six votes and the election-day guide.
   Deliberately a single dark look, like a Pro product page. */

:root {
  --bg: #000000;
  --alt: #0e0e10;
  --card: #1d1d1f;
  --card-2: #2a2a2d;
  --ink: #f5f5f7;
  --ink-2: #c7c7cc;
  --muted: #86868b;
  --line: #2c2c2f;
  --line-2: #3a3a3e;
  --blue: #0071e3;
  --blue-hi: #2997ff;
  --glass: 29, 29, 31;
  --spot: rgba(120, 140, 190, .22);
  --spot-2: rgba(60, 80, 140, .08);
  --urna-glow: rgba(110, 140, 220, .18);
  --word-1: rgba(255, 255, 255, .30);
  --word-2: rgba(205, 209, 217, .20);
  --word-3: rgba(150, 154, 163, .10);
  --boot-fill: #f5f5f7;
  --btn-top: #35383e; --btn-bot: #1f2125; --btn-edge: #050506; --btn-lip: rgba(255, 255, 255, .16);
  --cta-top: #2a8bff; --cta-bot: #0a67d2; --cta-edge: #04336b; --cta-lip: rgba(255, 255, 255, .38); --cta-ink: #fff;
  /* fine grain for the keys, like the porous plastic of the real urna */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23g)' opacity='.28'/%3E%3C/svg%3E");
  --sun: #ffc629;
  --go: #30d158;
  --fix: #ff9f0a;
  --focus: #2997ff;

  --cola-blue: #1546c2;
  --cola-blue-2: #0e3192;
  --cola-box: #d7dce5;
  --cola-digit: #1747c7;

  --f-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Inter", Menlo, monospace;
  --f-urna: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
  --radius: 28px;
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.103 27.9%, 1.085 30%, 1.02 35.9%, .997 39.4%, .988 43%, .992 49.3%, 1.001 59.7%, 1); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.47 var(--f-sans); letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
/* Safari's data detectors (addresses, phones, flights) would turn "União 16" or a candidate number into a link */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; pointer-events: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: max(24px, env(safe-area-inset-left, 0)); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #000; padding: 8px 16px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
kbd { font: 600 12px/1 var(--f-mono); padding: 4px 8px; border-radius: 6px; border: 1px solid currentColor; border-bottom-width: 2px; opacity: .8; letter-spacing: 0; }

/* ---------- capsule buttons ---------- */
.cap {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 32px; padding: 0 16px; border-radius: 9px; border: 0; --drop: 2px;
  font: 500 14px/1 var(--f-sans); letter-spacing: -.01em; white-space: nowrap; text-decoration: none; color: var(--ink);
  transition: transform .3s var(--spring), box-shadow .3s var(--ease-out), filter .2s;
}
.cap svg { width: 14px; height: 14px; flex: none; }
.cap-ghost b { font-weight: 600; }
.cap-ghost .muted { color: var(--muted); }

/* ---------- floating capsule nav ---------- */
.lnav { position: sticky; top: 0; z-index: 60; height: 0; padding: 0 12px; pointer-events: none; }
.lnav-bar {
  pointer-events: auto; position: relative; top: calc(10px + env(safe-area-inset-top, 0px));
  margin: 0 auto; max-width: 980px; height: 52px; padding: 0 8px 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(var(--glass), .72); border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .8);
}
.lnav-title { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 600 19px/1 var(--f-sans); letter-spacing: -.02em; white-space: nowrap; }
.lnav-title svg { width: 26px; height: 26px; }
.lnav-acts { display: flex; align-items: center; gap: 8px; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--bg); padding-top: 84px; }
.hero::before { /* spotlight behind the machine */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 140px; width: min(1400px, 150vw); height: 900px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--spot), var(--spot-2) 55%, transparent 80%);
  pointer-events: none;
}
/* the chrome wordmark is a backdrop: low contrast, pinned behind the machine, never pushing it down */
.wordmark {
  position: absolute; z-index: 0; left: 0; right: 0; top: calc(56px + env(safe-area-inset-top, 0px));
  display: flex; justify-content: center; pointer-events: none; user-select: none;
}
.wordmark span {
  display: block; font: 800 clamp(140px, min(30vw, 40vh), 400px)/.8 var(--f-sans); letter-spacing: -.06em;
  background: linear-gradient(180deg, var(--word-1) 0%, var(--word-2) 28%, var(--word-3) 55%, transparent 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform-origin: 50% 70%;
}
.studio { position: relative; z-index: 1; display: grid; justify-items: center; gap: 24px; padding-inline: max(16px, env(safe-area-inset-left, 0px)); margin-top: clamp(40px, min(9vw, 12vh), 120px); margin-top: round(down, clamp(40px, min(9vw, 12vh), 120px), 4px); }

.hero-foot { display: grid; gap: 28px; align-items: end; padding-block: 80px 96px; max-width: 1240px; }
@media (min-width: 1100px) { .hero-foot { grid-template-columns: minmax(0, 1fr) auto; } }
.hero-eyebrow { margin: 0 0 8px; font: 600 clamp(19px, 2vw, 24px)/1.2 var(--f-sans); letter-spacing: -.02em; color: var(--ink); }
.h1 { margin: 0; font: 700 clamp(46px, 6vw, 84px)/1.02 var(--f-sans); letter-spacing: -.035em; }
.h1 .line { display: block; overflow: clip; overflow-clip-margin: .14em; padding-bottom: .04em; }
.h1 .line > span { display: inline-block; }
.h1 .line + .line > span { background: linear-gradient(90deg, #ffd65c, #ffb800 60%, #ff9f0a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.buybar {
  justify-self: start; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 12px 12px 20px; border-radius: 22px; background: rgba(var(--glass), .8); border: 1px solid rgba(255, 255, 255, .08);
}
@media (min-width: 1100px) { .buybar { justify-self: end; } }
.buybar-t { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.35 var(--f-sans); color: var(--ink-2); }
.buybar-t b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.buybar .cap { min-height: 40px; padding: 0 20px; font-size: 15px; }
.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); color: var(--sun); flex: none; }
.is-open .dot { background: var(--go); color: var(--go); }
.dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .dot::after { animation: halo 2.4s var(--ease-out) infinite; } }
@keyframes halo { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }

/* ---------- panel under the urna: progress + guide ---------- */
.panel { width: 100%; max-width: 760px; display: grid; gap: 16px; }
.step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-inline: 4px; }
.step-cargo { margin: 0; font: 700 clamp(24px, 3vw, 32px)/1.1 var(--f-sans); letter-spacing: -.03em; }
.step-k { font: 600 13px/1 var(--f-sans); letter-spacing: .02em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the steps, as arrows like the progress bar on the urna's screen: current in white, voted in a stronger translucent white,
   null in orange; translucent so they sit well on any theme */
.trail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.t-item { min-width: 0; }
.t-item + .t-item { margin-left: -8px; }
.t-btn {
  appearance: none; width: 100%; height: 30px; border: 0; cursor: pointer; display: grid; place-items: center; padding: 0 16px 0 20px;
  background: rgba(255, 255, 255, .08); color: var(--muted); transition: background-color .3s, color .3s;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
}
.t-item:first-child .t-btn { padding-left: 12px; border-radius: 7px 0 0 7px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.t-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.t-item.is-done .t-btn { background: rgba(255, 255, 255, .22); color: var(--ink); }
.t-item.is-null .t-btn { background: color-mix(in srgb, var(--fix) 34%, transparent); color: #ffd9ad; }
.t-item.is-now .t-btn { background: var(--ink); color: #111; }
.t-lab { max-width: 100%; font: 600 12px/1 var(--f-sans); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* guide banner: message (icon, title, text, actions) on top, a settings strip for "Modo guiado" below */
.coach {
  --tone: var(--blue-hi);
  position: relative; display: grid; border-radius: 22px; overflow: hidden;
  background: var(--card); border: 1px solid rgba(255, 255, 255, .07);
}
.coach-main { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px 16px; align-items: start; padding: 20px 24px; }
.coach-main:empty { display: none; }
.coach-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; user-select: none;
  padding: 12px 24px; background: rgba(0, 0, 0, .22); border-top: 1px solid rgba(255, 255, 255, .06);
}
.coach-main:empty + .coach-foot { border-top: 0; padding-block: 16px; }
.coach-foot-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; font-size: 14px; line-height: 1.3; color: var(--muted); }
.coach-foot-t b { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.coach-foot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.coach-foot .track { width: 40px; height: 24px; }
.coach-foot .track::after { width: 20px; height: 20px; }
.coach-foot input:checked + .track { background: var(--go); }
.coach-foot input:checked + .track::after { transform: translateX(16px); }
.coach-foot input:focus-visible + .track { outline: 3px solid var(--focus); outline-offset: 2px; }
.coach-acts .link-s { margin-left: 4px; }
.coach[data-tone="go"] { --tone: var(--go); }
.coach[data-tone="fix"] { --tone: var(--fix); }
.coach[data-tone="sun"] { --tone: var(--sun); }
.coach-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.coach-ico svg { width: 20px; height: 20px; }
.coach-body { min-width: 0; display: grid; gap: 4px; padding-top: 0; }
.coach-t { margin: 0; font: 600 19px/1.3 var(--f-sans); letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.coach-p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.coach-acts { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; }
.coach.is-swap .coach-main > * { animation: coach-in .45s var(--ease-out) both; }
@keyframes coach-in { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.chip-k { display: inline-block; padding: 4px 8px; border-radius: 6px; font: 700 12px/1 var(--f-urna); letter-spacing: .03em; vertical-align: 1px; color: #111; }
.chip-k.ok { background: #35ad5c; }
.chip-k.fix { background: #f08a33; }
.chip-k.wh { background: #f3f3ef; }
.btn-s {
  appearance: none; cursor: pointer; min-height: 36px; padding: 0 16px; border-radius: 10px; border: 0; --drop: 2px;
  color: var(--ink); font: 500 15px/1 var(--f-sans); letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 8px; transition: transform .3s var(--spring), box-shadow .3s var(--ease-out), filter .2s;
}

.toggles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-inline: 8px; }
.sw-group { display: flex; gap: 16px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 500 15px/1 var(--f-sans); color: var(--ink-2); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #39393d; transition: background-color .3s var(--ease-out); flex: none; }
.track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); transition: transform .4s var(--spring); }
.switch input:checked + .track { background: var(--go); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 3px solid var(--focus); outline-offset: 2px; }
.link-s { appearance: none; background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--blue-hi); font: 500 15px/1 var(--f-sans); display: inline-flex; gap: 8px; align-items: center; }
.link-s svg { width: 15px; height: 15px; }
.kbd-hint { margin: 0; font-size: 13px; color: var(--muted); display: none; }
@media (hover: hover) and (pointer: fine) { .kbd-hint { display: block; } }

/* ---------- the urna ---------- */
.scene { position: relative; width: 100%; max-width: 1040px; perspective: 1800px; perspective-origin: 50% 0%; }
.urna { position: relative; transform-style: preserve-3d; }
.u-layers { display: none; }
.u-front {
  --mx: 30%; --my: 0%;
  position: relative; border-radius: 30px; padding: 16px;
  display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 16px; align-items: center;
  background:
    radial-gradient(120% 90% at var(--mx) var(--my), rgba(255, 255, 255, .5), transparent 55%),
    linear-gradient(162deg, #ebe8e1 0%, #dad6cd 40%, #c3beb3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    inset 0 0 0 1px rgba(0, 0, 0, .05),
    0 2px 3px rgba(0, 0, 0, .35),
    0 50px 90px -30px rgba(0, 0, 0, .95),
    0 0 120px -20px var(--urna-glow);
}
.u-front::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.u-floor { position: absolute; left: 8%; right: 8%; bottom: -50px; height: 80px; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, rgba(0, 0, 0, .9), transparent); filter: blur(8px); }
.u-screen-area { display: grid; gap: 12px; min-width: 0; align-content: center; }
.u-bezel {
  container: bezel / inline-size;
  position: relative; border-radius: 14px; padding: 12px;
  background: linear-gradient(180deg, #0b0c0e, #15171a);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .9), inset 0 -1px 0 rgba(255, 255, 255, .07), 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(0, 0, 0, .12);
}
.u-glass { position: absolute; inset: 12px; border-radius: 3px; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 26%, transparent 42%); mix-blend-mode: screen; }
.u-emboss { margin: 0; text-align: center; font: 700 10px/1 var(--f-sans); letter-spacing: .32em; text-transform: uppercase; color: rgba(70, 64, 56, .45); text-shadow: 0 1px 0 rgba(255, 255, 255, .75); }

/* screen: fixed 16:10 LCD (the UE2020 uses a 10.1" panel). Sized in container units, so it only scales. */
.screen {
  --fit: 1;
  position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 16 / 10; background: #fff; color: #000;
  font-family: var(--f-urna); font-size: calc(2.95cqw * var(--fit)); line-height: 1.22; letter-spacing: 0;
  display: flex; flex-direction: column; -webkit-font-smoothing: auto;
}
.screen.is-off { background: #0f1114; }
.screen.is-off > * { opacity: 0; }
.screen.is-boot { transition: background-color .55s var(--ease-io); }
.screen.is-boot > * { transition: opacity .35s .25s ease; }
/* the new urna's progress bar: every cargo as an arrow across the top, the current one in black */
.s-steps { list-style: none; margin: 0; padding: .45em .55em 0; display: flex; font-family: var(--f-urna); font-size: .46em; font-weight: 700; line-height: 1; letter-spacing: 0; }
.s-steps li { flex: 1 1 0; min-width: 0; margin-left: -.5em; padding: .62em .8em .62em 1.25em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #e4e4e4; color: #707070; clip-path: polygon(0 0, calc(100% - .7em) 0, 100% 50%, calc(100% - .7em) 100%, 0 100%, .7em 50%); }
.s-steps li:first-child { margin-left: 0; padding-left: .8em; clip-path: polygon(0 0, calc(100% - .7em) 0, 100% 50%, calc(100% - .7em) 100%, 0 100%); }
.s-steps li.is-done { background: #c8c8c8; color: #2a2a2a; }
.s-steps li.is-now { background: #111; color: #fff; }
.s-steps .sh { display: none; }
@container bezel (max-width: 560px) { .s-steps { font-size: .56em; } .s-steps .lg { display: none; } .s-steps .sh { display: inline; } }
.s-train { text-align: center; font-weight: 700; font-size: .62em; letter-spacing: .05em; margin-top: .45em; }
.s-main { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1em; padding: .1em 1.1em .45em; }
.s-left { min-width: 0; display: flex; flex-direction: column; }
.s-title { font-weight: 700; font-size: 1.36em; line-height: 1.15; }
.s-fields { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .5em; align-items: start; margin: .7em 0 0; }
.s-name, .s-party { font-size: 1.14em; line-height: 1.2; overflow-wrap: break-word; min-width: 0; }
.s-name { margin-top: .3em; }
.s-sub { font-size: .84em; overflow-wrap: break-word; min-width: 0; }
.s-alert { font-weight: 700; font-size: 1.08em; grid-column: 1 / -1; }
.digits { display: flex; gap: .28em; font-size: 1.42em; }
.digit { width: 1.18em; height: 1.42em; border: 1px solid #8e8e8e; border-radius: 2px; display: grid; place-items: center; font-weight: 400; line-height: 1; }
.digit.is-cur { animation: lcd-blink 1s steps(1, end) infinite; }
@keyframes lcd-blink { 0%, 49% { background: #000; } 50%, 100% { background: #fff; } }
.s-big { margin: auto 0; padding-block: .4em; text-align: center; font-weight: 700; font-size: 2.05em; }
.s-big.is-blink { animation: lcd-flash 1.25s steps(1, end) infinite; }
@keyframes lcd-flash { 0%, 69% { visibility: visible; } 70%, 100% { visibility: hidden; } }
.s-right { display: flex; flex-direction: column; align-items: center; gap: .7em; padding-top: .2em; }
.photo { margin: 0; display: grid; justify-items: center; gap: .25em; font-size: .8em; text-align: center; }
.photo img, .photo .ph { width: 8.6em; height: auto; aspect-ratio: 161 / 225; object-fit: cover; border: 1px solid #000; background: #ececec; }
.photo.is-vice img, .photo.is-vice .ph { width: 6.2em; }
.s-subs { display: flex; gap: .45em; }
.s-subs .photo.is-vice img, .s-subs .photo.is-vice .ph { width: 4em; }
.photo .ph { display: grid; place-items: center; }
.photo .ph svg { width: 58%; height: auto; fill: #bdbdbd; }
.photo img { opacity: 0; transition: opacity .2s ease; }
.photo img.is-loaded { opacity: 1; }
.s-foot { border-top: 1px solid #000; padding: .42em 1.1em .55em; font-size: .86em; line-height: 1.32; min-height: 4.75em; }
.s-foot .ind { padding-left: 2.6em; }
.s-foot.is-confira { display: grid; place-items: center; }
.s-foot.is-confira span { font-weight: 700; font-size: 1.2em; }
.s-msg { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: .55em; padding: 2em; }
.s-msg b { font-size: 1.45em; }
.s-msg .s-msg-btn { appearance: none; cursor: pointer; margin-top: .5em; border: 0; border-radius: .4em; padding: .7em 1.4em; background: #0071e3; color: #fff; font: 600 1em/1 var(--f-sans); }
.s-fim { flex: 1; display: grid; place-items: center; position: relative; }
.s-fim b { font: 700 calc(22cqw * var(--fit)) / 1 var(--f-urna); letter-spacing: .02em; }
.s-fim small { position: absolute; right: 1.2em; bottom: .9em; font-weight: 700; font-size: 1em; }

/* keypad column: the plate plus small device controls (sound, restart) right under it */
.u-side { display: grid; gap: 12px; min-width: 0; align-content: center; }
.u-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 4px; }
.u-sw, .u-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  font: 600 12px/1 var(--f-sans); letter-spacing: .02em; color: rgba(44, 41, 36, .72); text-transform: uppercase;
  transition: color .2s;
}
.u-sw svg, .u-btn svg { width: 15px; height: 15px; flex: none; }
.u-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.u-track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #0d0e10; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06); flex: none; transition: background-color .25s; }
.u-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, #e9e9e6, #b9b9b4); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); transition: transform .35s var(--spring); }
.u-sw input:checked + .u-track { background: #1f6f3c; }
.u-sw input:checked + .u-track::after { transform: translateX(12px); }
.u-sw input:focus-visible + .u-track { outline: 3px solid var(--focus); outline-offset: 2px; }
.u-btn { appearance: none; border: 0; background: none; padding: 4px 4px; }
/* lit when the vote is over: like a backlit key on the machine */
.u-btn.is-lit {
  color: #fff; padding: 4px 12px; border-radius: 999px;
  background: #26282c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 18px rgba(255, 255, 255, .18);
  text-shadow: 0 0 10px rgba(255, 255, 255, .55);
}
.u-btn.is-lit svg { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8)); }
@media (prefers-reduced-motion: no-preference) { .u-btn.is-lit { animation: lit 2.2s var(--ease-io) infinite; } }
@keyframes lit { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 14px rgba(255, 255, 255, .12); } 50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 26px rgba(255, 255, 255, .3); } }

/* keypad: every track is minmax(0, …) so labels can never push keys past the plate */
.u-pad {
  position: relative; min-width: 0; border-radius: 18px; padding: 16px;
  background: var(--grain) 0 0 / 64px 64px, linear-gradient(180deg, #232529, #141518); background-blend-mode: overlay, normal;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .6);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: center;
}
.u-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.u-nums .k0 { grid-column: 2; }
.key {
  --top: #3a3d43; --bot: #1b1d21; --edge: #08090a; --ink: #f6f6f3; --kh: clamp(44px, 4.4vw, 56px);
  --rim: rgba(255, 255, 255, .22);
  appearance: none; position: relative; cursor: pointer; border: 0; border-radius: 10px; padding: 0; min-width: 0;
  height: var(--kh); color: var(--ink); letter-spacing: 0;
  background: var(--grain) 0 0 / 64px 64px, linear-gradient(180deg, var(--top), var(--bot));
  background-blend-mode: overlay, normal;
  /* a thin lighter border line all around, so the key stands out from the dark plate */
  box-shadow: inset 0 0 0 1px var(--rim), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 4px 0 var(--edge), 0 7px 12px rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 clamp(20px, 2vw, 26px) / 1 var(--f-urna);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .32s var(--spring), box-shadow .32s var(--ease-out), filter .2s;
}
.key:active, .key.is-down {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 1px var(--rim), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 0 var(--edge), 0 2px 4px rgba(0, 0, 0, .55);
  transition-duration: .06s;
}
.key:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.key .n { position: relative; }
.key.k5::before { content: ""; position: absolute; left: 50%; top: calc(50% + .62em); width: 62%; height: 3px; margin-left: -31%; border-radius: 2px; background: #0d0e10; box-shadow: 0 1px 1px rgba(0, 0, 0, .85), 0 -1px 0 rgba(255, 255, 255, .2); pointer-events: none; }
/* Braille in relief, black like the key and seen by its shine: the number sign, then the digit */
.br { display: flex; gap: 4px; flex: none; }
.bc { display: grid; grid-template-columns: repeat(2, 5px); grid-auto-rows: 5px; gap: 3px; }
.br i { width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .75), rgba(255, 255, 255, .14) 45%, transparent 64%), #0d0e10; box-shadow: 0 1px 1px rgba(0, 0, 0, .85), 0 -1px 0 rgba(255, 255, 255, .1); }
.br i.o { background: none; box-shadow: none; }
.u-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: end; }
.key.act { --kh: clamp(42px, 4vw, 50px); font: 700 clamp(9.5px, .85vw, 12px) / 1 var(--f-urna); letter-spacing: .02em; color: #141414; }
.key.act .lbl { display: block; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.key.k-branco { --top: #fbfbf8; --bot: #dcdcd5; --edge: #8e8e88; background-image: var(--grain-soft), linear-gradient(180deg, var(--top), var(--bot)); background-blend-mode: multiply, normal; }
.key.k-corrige { --top: #f7913f; --bot: #d9661a; --edge: #87390b; }
.key.k-confirma { --top: #42ba6a; --bot: #22863f; --edge: #114e27; --kh: clamp(52px, 5.2vw, 64px); }
/* guided hint: a soft white halo breathing around the key to press, no outline */
.key.is-guide::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
@media (prefers-reduced-motion: no-preference) { .key.is-guide::after { animation: guide 1.8s var(--ease-out) infinite; } }
@keyframes guide { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }

/* intro (JS adds .is-intro to .scene on load) */
.is-intro .u-layers { display: block; position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.is-intro .u-layers i { position: absolute; inset: 0; border-radius: 30px; background: linear-gradient(162deg, #cfcbc1, #a9a499); transform: translateZ(calc(var(--z) * -1px)); }
.is-intro .urna { animation: urna-in 1.8s var(--ease-out) both; }
.is-intro .u-floor { animation: floor-in 1.8s var(--ease-out) both; }
@keyframes urna-in {
  0% { transform: translate3d(0, 90px, -160px) rotateX(-30deg) rotateY(-20deg) rotateZ(2deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes floor-in { 0% { opacity: 0; transform: scaleX(.5); } 100% { opacity: 1; transform: none; } }
.js .wordmark span { animation: word-in 1.6s var(--ease-out) both; }
@keyframes word-in { from { opacity: 0; transform: scale(1.12) translateY(20px); filter: blur(16px); } to { opacity: 1; transform: none; filter: none; } }
.js .reveal-hero { animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); }
.js .h1 .line > span { animation: line-up 1.05s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes line-up { from { transform: translateY(108%); } to { transform: none; } }

/* ---------- start: a short boot, Apple-style, then the reveal ---------- */
.boot { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 32px; transition: opacity .5s var(--ease-io), visibility .5s; }
.boot-mark { width: 120px; height: 80px; animation: bm-in .7s var(--ease-out) both; transition: transform .5s var(--ease-out); }
.bm-k { opacity: .16; animation: bm-on .25s ease forwards; }
.bm-1 { animation-delay: .25s; }
.bm-2 { animation-delay: .5s; }
.bm-3 { animation-delay: .8s; }
.bm-screen { opacity: .1; animation: bm-on .45s ease 1s forwards; }
.boot-bar { width: 150px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.boot-bar i { display: block; height: 100%; background: var(--boot-fill); border-radius: inherit; transform: scaleX(0); transform-origin: left; animation: boot-fill 1.15s .1s cubic-bezier(.45, .05, .25, 1) forwards; }
.boot.is-leaving { opacity: 0; visibility: hidden; }
.boot.is-leaving .boot-mark { transform: scale(1.12); }
@keyframes bm-in { from { opacity: 0; transform: scale(.9); } }
@keyframes bm-on { to { opacity: 1; } }
@keyframes boot-fill { to { transform: scaleX(1); } }
/* where the browser holds sound until a touch, the boot waits, switched off, for the visitor to turn the urna on */
.boot:not(.is-run) .bm-k, .boot:not(.is-run) .bm-screen, .boot:not(.is-run) .boot-bar i { animation-play-state: paused; }
.boot.is-gate { cursor: pointer; }
.boot.is-gate .boot-bar { display: none; }
.boot-go {
  display: none; justify-items: center; gap: 20px; appearance: none; border: 0; background: none; padding: 8px; cursor: pointer;
  color: var(--ink); font: 600 19px/1.2 var(--f-sans); letter-spacing: -.015em; -webkit-tap-highlight-color: transparent;
}
.boot.is-gate .boot-go { display: grid; }
/* the round button is its own element (Safari does not round an svg's background or shadow) and takes the theme's accent */
.go-ring {
  --ring: color-mix(in srgb, var(--boot-fill) 42%, transparent);
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; color: var(--boot-fill);
  background: color-mix(in srgb, var(--boot-fill) 10%, transparent); box-shadow: inset 0 0 0 1.5px var(--ring);
  animation: go-pulse 2.2s var(--ease-out) infinite; transition: transform .3s var(--spring), background-color .2s;
}
.go-ring svg { width: 40px; height: 40px; }
.boot-go:active .go-ring { transform: scale(.94); }
@media (hover: hover) { .boot-go:hover .go-ring { background: color-mix(in srgb, var(--boot-fill) 18%, transparent); } }
@keyframes go-pulse { 0% { box-shadow: inset 0 0 0 1.5px var(--ring), 0 0 0 0 var(--ring); } 100% { box-shadow: inset 0 0 0 1.5px var(--ring), 0 0 0 26px transparent; } }
.go-click { display: none; }
@media (hover: hover) and (pointer: fine) { .go-touch { display: none; } .go-click { display: inline; } }
.boot-go:focus { outline: none; }
.boot-go:focus-visible .go-ring { outline: 3px solid var(--focus); outline-offset: 4px; }
html.is-booting { overflow: hidden; }
.is-booting .reveal-hero, .is-booting .h1 .line > span, .is-booting .wordmark span { animation-play-state: paused !important; }
.is-booting .urna, .is-booting .u-floor { opacity: 0; }
/* the machine comes out of the dark, then a light sweeps across body and glass */
.is-intro .u-front { animation: lights-on 1.7s var(--ease-out) both; }
@keyframes lights-on { from { filter: brightness(.2); } to { filter: none; } }
.u-front::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, .05) 55%, transparent 63%);
  background-size: 260% 100%; background-position: 130% 0;
}
.is-sweep .u-front::after { animation: sweep 1.4s var(--ease-io) forwards; }
@keyframes sweep { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }

/* ---------- feature scenes: the real urna inside each frame, toured by a slow camera (JS fits it and finds the details) ---------- */
.fz { --s0: .2; }
.fz::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--blue-hi); opacity: 0; pointer-events: none; }
.fz-scene { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(var(--s0)); pointer-events: none; }
.fz.is-live .fz-scene { animation: fz-tour 11s cubic-bezier(.65, 0, .35, 1) var(--d, 0s) infinite; }
.fz.is-live::after { animation: fz-ring 11s ease var(--d, 0s) infinite; }
@keyframes fz-tour {
  0%, 5% { transform: translate(-50%, -50%) scale(var(--s0)); }
  17%, 28% { transform: translate(-50%, -50%) scale(var(--k1)) translate(var(--x1), var(--y1)); }
  42%, 53% { transform: translate(-50%, -50%) scale(var(--k2)) translate(var(--x2), var(--y2)); }
  67%, 80% { transform: translate(-50%, -50%) scale(var(--k3)) translate(var(--x3), var(--y3)); }
  94%, 100% { transform: translate(-50%, -50%) scale(var(--s0)); }
}
@keyframes fz-ring { 0%, 12% { opacity: 0; } 18%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
/* the scene urna always keeps its desktop proportions, whatever the screen size */
.fz-urna { width: 1040px; --w: 1040px; }
.fz-urna .u-front { grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); padding: 16px; gap: 16px; border-radius: 30px; }
.fz-urna .u-bezel { padding: 12px; border-radius: 14px; }
.fz-urna .u-glass { inset: 12px; }
.fz-urna .u-emboss { font-size: 10px; }
.fz-urna .u-pad { padding: 16px; gap: 12px; border-radius: 18px; }
.fz-urna .u-nums { gap: 8px; }
.fz-urna .u-acts { gap: 8px; }
.fz-urna .key { --kh: 56px; font-size: 26px; }
.fz-urna .key.act { --kh: 50px; font-size: 12px; }
.fz-urna .key.k-confirma { --kh: 64px; }
.fz-urna .br { display: flex; }
.fz-urna .u-front { grid-template-rows: auto auto; align-items: stretch; row-gap: 12px; }
.fz-urna .u-screen-area, .fz-urna .u-side { grid-row: span 2; grid-template-rows: subgrid; align-content: stretch; }
.fz-urna .u-bezel { align-self: center; }
.fz-urna .u-pad { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
.fz-urna .u-nums { grid-auto-rows: minmax(36px, 1fr); }
.fz-urna .u-nums .key { height: auto; }
.fz-scene .screen { font-size: calc(2.95cqw * var(--fit)); }
.fz-scene .photo img, .fz-scene .photo .ph { width: 8.6em; }
.fz-scene .photo.is-vice img, .fz-scene .photo.is-vice .ph { width: 6.2em; }
.fz-scene .s-fields[data-spot] { align-self: flex-start; }
.fz-seq { display: flex; align-items: center; gap: 24px; width: 1150px; }
.fz-seq .u-bezel { width: 330px; flex: none; padding: 8px; border-radius: 12px; }
.fz-seq .u-glass { inset: 10px; }
.fz-arrow { flex: none; width: 0; height: 0; border-block: 12px solid transparent; border-left: 18px solid var(--muted); opacity: .8; }

/* ---------- the dashboard's own dark (/painel): graphite surfaces, neutral greys, the brand's yellow as the one accent.
   Only colors and surfaces; the layout is the site's ---------- */
html.pn-dark {
  --bg: #0f0f11; --alt: #141416; --card: #1a1a1d; --card-2: #232327; --line: #242428; --line-2: #313136;
  --ink: #f5f5f7; --ink-2: #b9b9bf; --muted: #84848b;
  --blue: #ffd400; --blue-hi: #ffd400; --focus: #ffd400; --sun: #ffd400;
  --glass: 20, 20, 23;
  --spot: rgba(255, 255, 255, .03); --spot-2: rgba(255, 255, 255, 0);
  --btn-top: #2a2a2e; --btn-bot: #1c1c1f; --btn-edge: #060607; --btn-lip: rgba(255, 255, 255, .1);
  --cta-top: #ffe13d; --cta-bot: #f2c200; --cta-edge: #8a6a00; --cta-lip: rgba(255, 255, 255, .6); --cta-ink: #1a1400;
}
/* the cards: a hair lighter at the top, a border you barely see, a soft lip of light */
html.pn-dark .tile, html.pn-dark .pn-ped { background: linear-gradient(180deg, #1d1d20 0%, #18181b 100%); border: 1px solid rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 32px -24px rgba(0, 0, 0, .9); }
html.pn-dark .lnav-bar { background: rgba(20, 20, 23, .78); border-color: rgba(255, 255, 255, .06); }
/* the corners, quieter: 16 px on the cards, the rest in proportion (10 inside them, 8 for the small pieces) */
html.pn-dark .tile, html.pn-dark .pn-ped { border-radius: 16px; }
html.pn-dark .pn-act, html.pn-dark .pn-dev, html.pn-dark .pn-p, html.pn-dark .pn-dlg-ads, html.pn-dark .pn-pr input, html.pn-dark .pn-login input { border-radius: 10px; }
html.pn-dark .pn-p-ad, html.pn-dark .pn-p-st { border-radius: 8px; }
html.pn-dark .seg { border-radius: 12px; }
html.pn-dark .seg button { border-radius: 8px; }
html.pn-dark .btn { border-radius: 10px; }
html.pn-dark dialog { border-radius: 20px; }
@media (max-width: 819px) { html.pn-dark dialog { border-radius: 20px 20px 0 0; } }
/* the reference's finish: a halo of the accent behind the title, the main card in the accent, the tabs as a switch
   with the chosen one filled, the charts in two tones (what passed in grey, today in the accent), the tip as a card */
html.pn-dark .pn-head { position: relative; isolation: isolate; }
html.pn-dark .pn-head::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -96px; width: min(960px, 140vw); height: 360px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 212, 0, .16), rgba(255, 212, 0, .05) 55%, transparent); }
html.pn-dark .pn-head::after { content: ''; position: absolute; z-index: -1; left: 50%; bottom: -40px; width: min(760px, 120vw); height: 120px; transform: translateX(-50%); pointer-events: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 1px solid rgba(255, 212, 0, .35); box-shadow: 0 -12px 40px -16px rgba(255, 212, 0, .45);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
html.pn-dark .t-hero { background: radial-gradient(120% 90% at 100% 0%, #ffe45c 0%, #ffd400 40%, #e8b000 100%); border-color: rgba(255, 255, 255, .25); color: #1a1400;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 48px -24px rgba(255, 196, 0, .45); }
html.pn-dark .t-hero .pn-lab, html.pn-dark .t-hero .t-cmp { color: rgba(26, 20, 0, .72); }
html.pn-dark .t-hero .t-num { color: #1a1400; }
html.pn-dark .t-hero .t-cmp.is-up, html.pn-dark .t-hero .t-cmp.is-down { color: #1a1400; }
html.pn-dark .t-hero .spark { color: #1a1400; }
html.pn-dark .t-hero .spark-end { stroke: #ffd400; }
html.pn-dark .seg button[aria-pressed="true"] { background: #ffd400; color: #1a1400; box-shadow: none; }
html.pn-dark .seg button[aria-pressed="true"] .pn-badge { background: #1a1400; color: #ffd400; }
html.pn-dark .col i { background: rgba(255, 255, 255, .14); }
html.pn-dark .col.is-hoje i { background: linear-gradient(180deg, #ffe45c, #ffc400); }
html.pn-dark .col:hover i, html.pn-dark .col:focus-visible i { background: rgba(255, 255, 255, .3); }
html.pn-dark .col.is-hoje:hover i, html.pn-dark .col.is-hoje:focus-visible i { background: #fff0a3; }
html.pn-dark .tip { background: #ffd400; color: #1a1400; box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .8); }
html.pn-dark .tip small { color: rgba(26, 20, 0, .7); }

/* ---------- themes to compare (?tema=verde, ?tema=azul). The urna itself never changes color. ---------- */
html[data-tema="verde"] {
  --bg: #00170c; --alt: #021d10; --card: #0b2c1b; --card-2: #123825; --line: #1d4330; --line-2: #285639;
  --ink: #f6f8f1; --ink-2: #cfdccf; --muted: #9db8a4;
  --blue: #ffd400; --blue-hi: #ffd400; --focus: #ffd400; --sun: #ffd400;
  --glass: 3, 36, 19;
  --spot: rgba(255, 212, 0, .16); --spot-2: rgba(0, 156, 59, .14);
  --urna-glow: rgba(255, 212, 0, .14);
  /* opaque, so the flag's lozenge behind the letters stays behind them */
  --word-1: color-mix(in srgb, #ffdd00 34%, var(--bg)); --word-2: color-mix(in srgb, #ffdd00 20%, var(--bg)); --word-3: color-mix(in srgb, #009c3b 14%, var(--bg));
  --boot-fill: #ffd400;
  --btn-top: #1d4a31; --btn-bot: #10301f; --btn-edge: #03120a; --btn-lip: rgba(255, 255, 255, .14);
  --cta-top: #ffe13d; --cta-bot: #f2c200; --cta-edge: #8a6a00; --cta-lip: rgba(255, 255, 255, .6); --cta-ink: #0a2414;
}
/* the yellow lozenge of the flag, at the very back of the hero (behind the wordmark, the machine and the panel),
   centered on the urna (JS sets --lz-y and --lz-w) and ending at the urna's base (--lz-cut), so it never crosses the
   panel below; just a soft glow, no outline. Left out on phones. */
html[data-tema="verde"] .hero::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: var(--lz-y, 380px); width: min(var(--lz-w, 940px) * 1.15, 100vw - 24px);
  aspect-ratio: 166 / 106; transform: translate(-50%, -50%); pointer-events: none;
  clip-path: inset(0 0 calc(100% - var(--lz-cut, 100%)) 0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166 106' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0' stop-color='%23ffdd00' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23ffdd00' stop-opacity='.08'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpolygon points='83,1.5 164.5,53 83,104.5 1.5,53' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (max-width: 760px) { html[data-tema="verde"] .hero::after { display: none; } }
/* the results page has no urna under its title, so the lozenge would only show as a cut triangle */
html[data-tema="verde"] .apu-hero::after { display: none; }
html[data-tema="azul"] {
  --bg: #020b26; --alt: #04102e; --card: #0b1a42; --card-2: #112456; --line: #1b2c5e; --line-2: #243a73;
  --ink: #f5f7ff; --ink-2: #cdd6f0; --muted: #98a8cc;
  --blue: #12a150; --blue-hi: #ffd400; --focus: #ffd400; --sun: #ffd400;
  --glass: 5, 18, 54;
  --spot: rgba(70, 110, 220, .3); --spot-2: rgba(30, 60, 160, .12);
  --urna-glow: rgba(120, 160, 255, .2);
  --word-1: rgba(255, 255, 255, .32); --word-2: rgba(200, 215, 255, .2); --word-3: rgba(120, 150, 230, .1);
  --boot-fill: #ffd400;
  --btn-top: #1a2f66; --btn-bot: #0f2050; --btn-edge: #030a1f; --btn-lip: rgba(255, 255, 255, .15);
  --cta-top: #1bb85e; --cta-bot: #0b8f43; --cta-edge: #04471f; --cta-lip: rgba(255, 255, 255, .45); --cta-ink: #fff;
  /* the call to action here is green, so the highlight tier takes the flag's yellow and never looks like WhatsApp */
  --hi-top: #ffe13d; --hi-bot: #f2c200; --hi-edge: #8a6a00; --hi-lip: rgba(255, 255, 255, .6); --hi-ink: #0a1a3f;
}
/* the starry sky of the flag: 27 stars, one per state, with the Southern Cross, and a faint band */
html[data-tema="azul"] .hero::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 40px; width: min(1500px, 160vw); aspect-ratio: 14 / 9; transform: translateX(-50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900'%3E%3Cdefs%3E%3Cpath id='s' d='M0-10 2.35-3.24 9.51-3.09 3.8 1.24 5.88 8.09 0 4 -5.88 8.09 -3.8 1.24 -9.51-3.09 -2.35-3.24Z' fill='%23fff'/%3E%3C/defs%3E%3Cpath d='M-80 600 Q 700 330 1480 560' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='70'/%3E%3Cg fill-opacity='.9'%3E%3Cuse href='%23s' transform='translate(175 120) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(190 330) scale(1.7)'/%3E%3Cuse href='%23s' transform='translate(105 225) scale(1.25)'/%3E%3Cuse href='%23s' transform='translate(268 205) scale(1.1)'/%3E%3Cuse href='%23s' transform='translate(222 262) scale(.6)'/%3E%3Cuse href='%23s' transform='translate(1225 140) scale(1.3)'/%3E%3Cuse href='%23s' transform='translate(1310 260) scale(.8)'/%3E%3Cuse href='%23s' transform='translate(1150 300) scale(.7)'/%3E%3Cuse href='%23s' transform='translate(1270 420) scale(1)'/%3E%3Cuse href='%23s' transform='translate(1355 520) scale(.6)'/%3E%3Cuse href='%23s' transform='translate(60 470) scale(.8)'/%3E%3Cuse href='%23s' transform='translate(140 560) scale(.6)'/%3E%3Cuse href='%23s' transform='translate(40 640) scale(1)'/%3E%3Cuse href='%23s' transform='translate(1190 620) scale(.7)'/%3E%3Cuse href='%23s' transform='translate(1330 690) scale(.9)'/%3E%3Cuse href='%23s' transform='translate(420 60) scale(.6)'/%3E%3Cuse href='%23s' transform='translate(990 70) scale(.7)'/%3E%3Cuse href='%23s' transform='translate(1080 200) scale(.5)'/%3E%3Cuse href='%23s' transform='translate(330 400) scale(.5)'/%3E%3Cuse href='%23s' transform='translate(1080 470) scale(.5)'/%3E%3Cuse href='%23s' transform='translate(250 720) scale(.7)'/%3E%3Cuse href='%23s' transform='translate(1120 760) scale(.6)'/%3E%3Cuse href='%23s' transform='translate(560 30) scale(.5)'/%3E%3Cuse href='%23s' transform='translate(860 40) scale(.5)'/%3E%3Cuse href='%23s' transform='translate(1395 360) scale(.5)'/%3E%3Cuse href='%23s' transform='translate(15 340) scale(.6)'/%3E%3Cuse href='%23s' transform='translate(700 860) scale(.6)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .85;
}

/* ---------- sections ---------- */
.section { padding-block: clamp(88px, 12vw, 160px); padding-block: round(clamp(88px, 12vw, 160px), 4px); background: var(--bg); }
.section.alt { background: var(--alt); }
.center-head { text-align: center; max-width: 860px; margin: 0 auto; display: grid; justify-items: center; }
.eyebrow { margin: 0 0 8px; font: 600 clamp(19px, 2vw, 24px)/1.2 var(--f-sans); letter-spacing: -.02em; color: var(--muted); }
.h2 { margin: 0; font: 700 clamp(40px, 6.4vw, 80px)/1.04 var(--f-sans); letter-spacing: -.035em; text-wrap: balance; }
.h2 .w { display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top; padding-bottom: .06em; }
.h2 .w > span { display: inline-block; }
.sec-lede { margin: 24px 0 0; font: 600 clamp(19px, 1.8vw, 22px)/1.4 var(--f-sans); letter-spacing: -.02em; color: var(--muted); max-width: 40ch; text-wrap: pretty; }
.prose { margin: 28px auto 0; max-width: 820px; font: 600 clamp(20px, 2.1vw, 26px)/1.36 var(--f-sans); letter-spacing: -.022em; color: var(--muted); text-wrap: pretty; }
.prose b, .prose #trust-data { color: var(--ink); font-weight: 600; }

.stats { list-style: none; margin: 72px 0 0; padding: 48px 0 0; border-top: 1px solid var(--line); display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); text-align: center; }
.stats li { display: grid; gap: 4px; justify-items: center; }
.stats small { font: 600 13px/1.2 var(--f-sans); color: var(--muted); letter-spacing: 0; }
.stats b { font: 700 clamp(36px, 4vw, 52px)/1.05 var(--f-sans); letter-spacing: -.035em; }
.stats span { font-size: 15px; color: var(--muted); max-width: 22ch; }

/* scroll reveal: visible without JS; JS opts elements in */
.js [data-reveal] { transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(36px); }
.js .h2[data-split] .w > span { transition: transform 1.1s var(--ease-out), opacity 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js .h2[data-split]:not(.is-in) .w > span { transform: translateY(110%); opacity: 0; }

/* cola */
.cola-grid { display: grid; gap: 48px 80px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 980px) { .cola-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); } }
.cola-copy { display: grid; align-content: center; }
/* the cola's calls to action: the colinha on a row of its own, the two quieter ways side by side under it */
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 32px; max-width: 480px; }
.actions .btn { width: 100%; }
.actions .btn.primary { grid-column: 1 / -1; min-height: 54px; font-size: 18px; }
.actions .btn.wa, .actions #print { grid-column: 1 / -1; }
.btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 12px; border: 0; --drop: 3px;
  color: var(--ink); font: 500 17px/1 var(--f-sans); letter-spacing: -.02em; text-decoration: none;
  transition: transform .3s var(--spring), box-shadow .3s var(--ease-out), filter .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .5s var(--spring); }
/* calls to action share the urna keys' relief: a lit top edge, a darker base and a lip that sinks when pressed */
.cap, .btn-s, .btn {
  --top: var(--btn-top); --bot: var(--btn-bot); --edge: var(--btn-edge); --lip: var(--btn-lip); --ring: var(--go);
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--top), var(--bot));
  box-shadow: inset 0 1px 0 var(--lip), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 var(--drop) 0 var(--edge), 0 calc(var(--drop) + 3px) 10px rgba(0, 0, 0, .4);
}
.cap:active, .btn-s:active, .btn:active {
  transform: translateY(calc(var(--drop) - 1px));
  box-shadow: inset 0 1px 0 var(--lip), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 0 var(--edge), 0 2px 4px rgba(0, 0, 0, .45);
  transition-duration: .06s;
}
.cap-blue, .btn-s.solid, .btn.primary { --top: var(--cta-top); --bot: var(--cta-bot); --edge: var(--cta-edge); --lip: var(--cta-lip); --ring: var(--cta-top); color: var(--cta-ink); }
/* the highlight tier: yellow on the Brazil themes, the theme's call to action elsewhere */
.btn.hi { --top: var(--hi-top, var(--cta-top)); --bot: var(--hi-bot, var(--cta-bot)); --edge: var(--hi-edge, var(--cta-edge)); --lip: var(--hi-lip, var(--cta-lip)); --ring: var(--top); color: var(--hi-ink, var(--cta-ink)); font-weight: 600; }
/* the quiet way out: no relief, just a light line */
.btn.ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.btn.ghost:active { transform: scale(.98); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.btn.ghost::after { display: none; }
.btn.ghost.is-spin svg { transform: rotate(-360deg); }
/* a glint crosses the key: under the pointer, and now and then on the colored calls to action */
.cap::after, .btn-s::after, .btn::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -75%; width: 50%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34) 50%, transparent); transform: skewX(-18deg);
}
@keyframes glint { from { opacity: 1; transform: translateX(0) skewX(-18deg); } to { opacity: 1; transform: translateX(450%) skewX(-18deg); } }
@keyframes glint-idle { 0%, 72% { opacity: 1; transform: translateX(0) skewX(-18deg); } 100% { opacity: 1; transform: translateX(450%) skewX(-18deg); } }
@media (prefers-reduced-motion: no-preference) {
  .btn.wa::after, .btn.primary::after, .btn.hi::after { animation: glint-idle 6s var(--ease-io) 1.2s infinite; }
  .btn.hi::after { animation-delay: 2.8s; }
}
/* feedback inside the button: a spinner while it works, then a check that draws itself, then the label again */
.btn:disabled { opacity: .6; cursor: progress; }
.btn.is-busy:disabled { opacity: 1; }
.b-spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.2px solid currentColor; border-right-color: transparent; animation: lab-in .3s var(--ease-out) backwards, spin .7s linear infinite; }
.b-tick { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lab-in .3s var(--ease-out) backwards, tick .5s .12s var(--ease-out) forwards; }
.btn:not(.hi):not(.primary):not(.wa) .b-tick { color: var(--go); }
.b-lab, .btn.is-back > * { animation: lab-in .35s var(--ease-out) backwards; }
.btn.is-done { animation: done-pop .65s var(--ease-out); }
@keyframes lab-in { from { opacity: 0; translate: 0 8px; filter: blur(3px); } }
@keyframes tick { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes done-pop { 0% { scale: .96; outline: 2px solid var(--ring); outline-offset: 0; } 45% { scale: 1.03; } 100% { scale: 1; outline: 2px solid transparent; outline-offset: 12px; } }
@keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg) scale(1.12); } 55% { transform: rotate(10deg) scale(1.12); } 80% { transform: rotate(-4deg) scale(1.04); } }
.fine { margin: 24px 0 0; font-size: 15px; color: var(--muted); line-height: 1.5; max-width: 52ch; }
.fine button { appearance: none; background: none; border: 0; padding: 0; color: var(--blue-hi); font-weight: 500; cursor: pointer; }
.status { min-height: 24px; margin: 16px 0 0; font-weight: 600; font-size: 15px; color: var(--go); }

.desk { position: relative; display: grid; place-items: center; padding: clamp(8px, 3vw, 40px); padding: round(clamp(8px, 3vw, 40px), 4px); }
.desk::before { content: ""; position: absolute; inset: 4% 0; border-radius: 50%; z-index: 0; background: radial-gradient(closest-side, rgba(40, 90, 230, .28), transparent); filter: blur(10px); }
.paper { position: relative; z-index: 1; width: 100%; max-width: 480px; transform: rotate(-2deg); transition: transform .9s var(--spring), opacity 1s var(--ease-out); }
.js .paper[data-reveal]:not(.is-in) { transform: translateY(80px) rotate(-8deg) scale(.96); }

.poster {
  container-type: inline-size; position: relative; overflow: hidden; border-radius: 8px; color: #fff;
  background: linear-gradient(180deg, var(--cola-blue), var(--cola-blue-2));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.p-in { padding: 7cqw 4.4cqw 5cqw; display: grid; gap: 5.4cqw; }
.p-star { position: absolute; color: #ffc629; line-height: 1; pointer-events: none; font-size: 6cqw; }
.p-star.a { top: 5cqw; left: 9cqw; }
.p-star.b { top: 25cqw; right: 8cqw; font-size: 4cqw; }
/* the title: one compact yellow seal with a check, like the urna's confirm */
.p-tag { display: flex; justify-content: center; }
.p-tag span { display: inline-flex; align-items: center; gap: 2cqw; padding: 1.8cqw 4.4cqw 1.8cqw 2cqw; border-radius: 99px; background: #ffc629; color: #0e3192; font: 800 7.4cqw/1 var(--f-sans); letter-spacing: -.02em; text-transform: uppercase; box-shadow: 0 1.2cqw 0 #c99700; }
.p-tag svg { flex: none; width: 7.4cqw; height: 7.4cqw; }
.p-tag svg circle { fill: currentColor; }
.p-tag svg path { fill: none; stroke: #ffc629; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.p-body { display: grid; grid-template-columns: 6cqw minmax(0, 1fr) 6cqw; gap: 2.6cqw; }
.p-side { writing-mode: vertical-rl; align-self: center; text-align: center; letter-spacing: 0; }
.p-side.l { transform: rotate(180deg); font: 800 3.1cqw/1.05 var(--f-sans); text-transform: uppercase; }
.p-side.r { font: 500 2.4cqw/1.3 var(--f-sans); opacity: .92; }
.p-card { background: #fff; color: #111; border-radius: 4.4cqw; padding: 3.6cqw 3.4cqw; }
.p-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6cqw; }
.p-row { appearance: none; width: 100%; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; padding: 1.5cqw 1.8cqw; border-radius: 2.6cqw; display: grid; gap: 1.3cqw; transition: background-color .2s; }
.p-row.is-now { background: #fff3c9; }
.p-cargo { font: 800 4.1cqw/1 var(--f-sans); text-transform: uppercase; letter-spacing: -.02em; }
.p-cargo em { font-style: normal; font-weight: 600; text-transform: none; font-size: .9em; letter-spacing: -.01em; }
.p-boxes { display: flex; align-items: center; gap: 1.6cqw; }
.p-box { width: 9.4cqw; height: 8.2cqw; border-radius: .8cqw; background: var(--cola-box); display: grid; place-items: center; font: 700 7cqw/1 var(--f-urna); color: var(--cola-digit); letter-spacing: 0; }
.p-box.wide { width: auto; padding-inline: 3cqw; font-size: 4.8cqw; letter-spacing: .06em; }
.p-box.empty { color: #9aa4b5; }
.p-note { font: 700 2.5cqw/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: #5b6475; margin-left: .6cqw; }
.p-row.is-stamp .p-boxes > * { animation: stamp .55s var(--spring) both; animation-delay: calc(var(--j, 0) * 45ms); }
@keyframes stamp { 0% { transform: scale(1.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.p-foot { margin: 0; text-align: center; font: 700 2.7cqw/1.3 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; opacity: .92; }
.p-foot small { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .75; margin-top: .8cqw; font-size: 2.4cqw; }

/* fidelity features */
.feats { list-style: none; margin: 64px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .feats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feat { background: var(--card); border-radius: var(--radius); padding: 24px 24px 32px; display: grid; gap: 8px; align-content: start; }
.feat h3 { margin: 16px 0 0; font: 700 21px/1.2 var(--f-sans); letter-spacing: -.025em; }
.feat p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.45; }
.feat-vis { position: relative; height: 150px; border-radius: 18px; background: radial-gradient(120% 100% at 50% 0%, var(--card-2), color-mix(in srgb, var(--bg) 55%, var(--card))); display: grid; place-items: center; overflow: hidden; }


/* six votes */
.votes6 { margin: 56px 0 0; list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); grid-auto-rows: 1fr; }
.votes6 > li { display: flex; min-width: 0; }
.v-card { appearance: none; flex: 1; width: 100%; min-height: 236px; text-align: left; cursor: pointer; color: inherit; border: 0; display: grid; grid-template-rows: auto auto auto 1fr; gap: 16px; align-content: start; padding: 24px; border-radius: var(--radius); background: var(--card); transition: transform .6s var(--spring), background-color .3s; }
.v-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v-ord { font: 600 14px/1 var(--f-sans); color: var(--muted); letter-spacing: -.01em; }
.v-done { font: 600 14px/1 var(--f-sans); color: var(--go); display: inline-flex; align-items: center; gap: 8px; }
.v-done svg { width: 15px; height: 15px; }
.v-name { margin: 0; font: 700 28px/1.05 var(--f-sans); letter-spacing: -.03em; }
.v-name em { font-style: normal; color: var(--muted); font-weight: 600; font-size: 17px; letter-spacing: -.01em; margin-left: 8px; }
.v-boxes { display: flex; gap: 8px; }
.v-boxes i { width: 44px; height: 54px; border-radius: 12px; border: 1px solid var(--line-2); background: #0b0b0c; }
.v-note { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.45; }

/* guide */
.guide-grid { display: grid; gap: 48px 72px; grid-template-columns: minmax(0, 1fr); margin-top: 64px; }
@media (min-width: 980px) { .guide-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); } }
.ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; align-self: start; background: var(--card-2); color: var(--blue-hi); }
.ic svg { width: 22px; height: 22px; }
.check { list-style: none; margin: 0; padding: 0; display: grid; }
.check li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.check li:last-child { border-bottom: 1px solid var(--line); }
.check h3, .alert h3 { margin: 0 0 4px; font: 600 19px/1.3 var(--f-sans); letter-spacing: -.02em; }
.check p, .alert p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.check a { color: var(--blue-hi); text-decoration: none; }
.alert { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 24px; border-radius: var(--radius); background: var(--card); margin-bottom: 16px; }
.alert .ic { background: var(--fix); color: #000; }
.faq { display: grid; gap: 8px; align-content: start; }
.faq details { border-radius: 20px; background: var(--card); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font: 600 18px/1.35 var(--f-sans); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23f5f5f7' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform .45s var(--spring);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 24px 24px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.faq .a p { margin: 0; }
.faq .a b { color: var(--ink); font-weight: 600; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .5s var(--ease-out), content-visibility .5s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* footer */
.foot { background: var(--alt); color: var(--muted); padding-block: 56px calc(36px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); overflow: hidden; overflow: clip; }
.foot > .wrap { container-type: inline-size; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); } }
.foot .logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 600 18px/1 var(--f-sans); letter-spacing: -.02em; }
.foot .logo svg { width: 26px; height: 26px; }
.foot .foot-slogan { margin-top: 8px; color: var(--blue-hi); font: 700 15px/20px var(--f-sans); letter-spacing: -.01em; }
.foot p { margin: 0; font-size: 13.5px; line-height: 1.6; letter-spacing: -.01em; }
.foot h3 { margin: 0 0 8px; color: var(--ink-2); font: 600 13px/1.2 var(--f-sans); letter-spacing: -.01em; }
.foot a { color: var(--ink-2); }
/* the closing wordmark takes the color of the hero's URNA, solid, always one whole line (sized to the footer's width,
   with room for the widest system font) */
.foot-big {
  margin-top: 56px; font: 800 clamp(48px, 12vw, 156px)/.85 var(--f-sans); font-size: 13.1cqw; letter-spacing: -.05em; text-align: center;
  white-space: nowrap; overflow: hidden; user-select: none; transform-origin: 50% 70%; color: var(--word-1);
}
.js .foot-big[data-reveal] { transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out), filter 1.6s var(--ease-out); }
.js .foot-big[data-reveal]:not(.is-in) { transform: scale(1.12) translateY(20px); filter: blur(16px); }

/* dialogs */
dialog { border: 0; padding: 0; color: var(--ink); background: var(--card); width: min(640px, calc(100vw - 24px)); max-height: min(86vh, 820px); max-height: min(86svh, 820px); border-radius: 20px; box-shadow: 0 50px 140px -20px rgba(0, 0, 0, .9); }
dialog::backdrop { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
dialog[open] { animation: dlg-in .55s var(--ease-out) both; }
dialog[open]::backdrop { animation: fade-in .4s ease both; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
.dlg { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: inherit; }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 24px 8px; }
.dlg-head h2 { margin: 0; font: 700 30px/1.05 var(--f-sans); letter-spacing: -.03em; }
.dlg-head p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.dlg-x { appearance: none; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card-2); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.dlg-x svg { width: 14px; height: 14px; }
.dlg-body { overflow: auto; padding: 8px 24px 24px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
/* while a dialog is open the page behind holds still: its blur is drawn once, not on every frame (lighter, and no
   flicker when the dialog scrolls) */
body:has(dialog[open])::before, body:has(dialog[open])::after, body:has(dialog[open]) main::before, body:has(dialog[open]) main::after,
body:has(dialog[open]) main * { animation-play-state: paused !important; }
.uf-sug { margin: 8px 24px 4px; }
.uf-sug button { appearance: none; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--ink); border-radius: 18px; padding: 16px 16px; font: 600 17px/1.3 var(--f-sans); }
.uf-sug svg { width: 20px; height: 20px; color: var(--blue-hi); flex: none; }
.uf-sug small { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
.uf-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.uf-opt { appearance: none; width: 100%; cursor: pointer; text-align: left; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; border: 1px solid transparent; background: var(--card-2); color: var(--ink); border-radius: 14px; padding: 8px 12px; min-height: 56px; transition: border-color .2s, background-color .2s, transform .2s var(--ease-out); }
.uf-opt:active { transform: scale(.98); }
.uf-opt b { font: 700 17px/1 var(--f-sans); letter-spacing: -.01em; color: var(--blue-hi); }
.uf-opt span { font-size: 14.5px; line-height: 1.2; }
.uf-opt.is-cur { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, transparent); }
/* the 2nd round's picker: all 27 at once, without scrolling; the code on top, the name under it */
@media (min-width: 761px) { #dlg-pick { width: min(760px, calc(100vw - 24px)); } } /* a phone: the usual bottom sheet */
.pk-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.pk-grid .uf-opt { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 4px; min-height: 52px; padding: 8px 12px; border-radius: 12px; }
.pk-grid .uf-opt b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pk-grid .uf-opt span { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-gov { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); vertical-align: 1px; }
@media (max-width: 760px) {
  .uf-list.pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pk-grid .uf-opt { padding: 8px 4px 8px 8px; min-height: 56px; }
  .pk-grid .uf-opt span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; line-height: 1.2; }
}
.search-in { position: relative; margin: 8px 24px 4px; display: block; }
.search-in svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.search-in input { width: 100%; min-height: 54px; padding: 0 16px 0 48px; border-radius: 16px; border: 1px solid var(--line-2); background: #0b0b0c; color: var(--ink); font-size: 17px; outline: none; transition: border-color .2s, box-shadow .2s; }
.search-in input:focus { border-color: var(--blue-hi); box-shadow: 0 0 0 4px rgba(41, 151, 255, .25); }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.res { appearance: none; width: 100%; cursor: pointer; text-align: left; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid transparent; background: var(--card-2); color: var(--ink); border-radius: 16px; padding: 8px 16px 8px 8px; transition: border-color .2s, transform .2s var(--ease-out); }
.res:active { transform: scale(.99); }
.res img { width: 48px; height: 64px; border-radius: 8px; object-fit: cover; background: #3a3a3e; }
.res .nm { font-weight: 600; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.res .pt { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.res .nr { font: 700 28px/1 var(--f-sans); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.empty { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: rgba(var(--glass), .92); color: var(--ink); padding: 12px 16px; border-radius: 24px; font: 500 15px/1.3 var(--f-sans); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .1); transition: transform .5s var(--spring), opacity .3s ease; width: max-content; max-width: calc(100vw - 32px); text-align: center; text-wrap: balance; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
/* moved inside an open dialog, it sits at the dialog's foot in every browser */
dialog .toast { position: absolute; bottom: 20px; max-width: calc(100% - 32px); }
.toast button { appearance: none; border: 0; background: none; color: var(--blue-hi); font: 600 15px/1 var(--f-sans); margin-left: 16px; cursor: pointer; padding: 4px 0; }

/* ---------- responsive ---------- */
/* tablets (iPad portrait and similar): finger-sized keys */
@media (min-width: 761px) and (max-width: 1100px) {
  .u-front { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .key { --kh: 58px; font-size: 27px; }
  .key.act { --kh: 52px; font-size: 11.5px; letter-spacing: .01em; }
  .key.k-confirma { --kh: 68px; }
  .u-nums { gap: 12px; }
  .u-acts { gap: 8px; }
}
/* side by side, the screen frame and the keypad plate are the same height, aligned top and bottom like on the
   real urna; the line under them (embossed name, sound and restart) lines up too. The keys spread to fill. */
@media (min-width: 761px) {
  .u-front { grid-template-rows: auto auto; align-items: stretch; row-gap: 12px; }
  .u-screen-area, .u-side { grid-row: span 2; grid-template-rows: subgrid; align-content: stretch; }
  .u-bezel { align-self: center; }
  .u-pad { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .u-nums { grid-auto-rows: minmax(36px, 1fr); }
  .u-nums .key { height: auto; }
}
/* wide screens: the machine and its guide banner fit in the first screen (iPad landscape, laptops).
   The urna moves up first and only shrinks if it still has to; the keys follow its width. */
@media (min-width: 1101px) {
  .studio { --peek: clamp(28px, 13svh - 60px, 120px); margin-top: var(--peek); margin-top: round(down, var(--peek), 4px); gap: 20px; }
  .scene { --w: clamp(820px, (100svh - var(--peek) - 460px) * 2.38, 1040px); max-width: var(--w); }
  .panel { gap: 12px; }
  .key { --kh: clamp(44px, var(--w) * .054, 56px); font-size: clamp(20px, var(--w) * .025, 26px); }
  .key.act { --kh: clamp(40px, var(--w) * .048, 50px); font-size: clamp(9.5px, var(--w) * .0115, 12px); }
  .key.k-confirma { --kh: clamp(50px, var(--w) * .062, 64px); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .lnav-bar { height: 48px; padding: 0 8px 0 16px; border-radius: 16px; }
  .lnav-title span { font-size: 17px; }
  .cap-ghost .muted { display: none; }
  .hero { padding-top: 72px; }
  .wordmark { top: calc(52px + env(safe-area-inset-top, 0px)); }
  .studio { gap: 20px; margin-top: 15vw; margin-top: round(down, 15vw, 4px); }
  .u-front { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; border-radius: 24px; }
  .is-intro .u-layers i { border-radius: 24px; }
  .u-pad { padding: 12px; gap: 8px; border-radius: 16px; }
  .u-nums { gap: 8px; }
  .u-bezel { padding: 8px; border-radius: 12px; }
  .u-glass { inset: 9px; }
  .key { --kh: 48px; font-size: 24px; }
  .key.act { --kh: 46px; font-size: 13px; }
  .key.k-confirma { --kh: 56px; }
  .u-sw, .u-btn { font-size: 13px; }
  .u-emboss { font-size: 9px; }
  /* phone: the LCD is small, so its type runs a little larger than the real urna's, same layout.
     Photos keep their share of the screen, so a candidate screen doesn't shrink back. */
  .screen { font-size: calc(3.6cqw * var(--fit)); }
  .photo img, .photo .ph { width: calc(20.3cqw * var(--fit)); }
  .photo.is-vice img, .photo.is-vice .ph { width: calc(14.6cqw * var(--fit)); }
  .t-lab { display: none; }
  .t-btn { height: 14px; }
  .coach { border-radius: 20px; }
  .coach-main { grid-template-columns: 34px minmax(0, 1fr); gap: 16px 12px; padding: 16px; }
  /* phone: actions span the whole banner, stacked by importance */
  .coach-acts { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 8px; }
  .coach-acts .btn-s { width: 100%; justify-content: center; min-height: 48px; font-size: 16px; }
  .coach-acts .link-s { justify-content: center; min-height: 40px; margin-left: 0; font-size: 16px; }
  .coach-ico { width: 34px; height: 34px; border-radius: 10px; }
  .coach-ico svg { width: 18px; height: 18px; }
  .coach-t { font-size: 17px; }
  .coach-p { font-size: 16px; }
  .coach-foot { padding: 12px 16px; }
  .coach-foot-t { font-size: 14px; gap: 8px; }
  .hero-foot { padding-block: 56px 72px; }
  /* phone: every call to action spans the full width */
  .buybar { width: 100%; flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
  .buybar-t { justify-content: center; text-align: center; }
  .buybar .cap { width: 100%; min-height: 48px; font-size: 16px; }
  .actions { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .v-card { padding: 24px; }
  .feat-vis { height: 130px; }
  .dlg-head { padding: 24px 16px 8px; }
  .dlg-body { padding: 8px 16px 16px; }
  .uf-sug, .search-in { margin-inline: 16px; }
  .uf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* phones: every dialog is a bottom sheet, like in apps: full width, rising from the bottom, a grab handle on top */
  dialog, dialog#dlg-cola, dialog#dlg-camara { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92vh; max-height: 92svh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); transition: transform .25s var(--ease-out); }
  dialog::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; translate: -50% 0; border-radius: 2px; background: rgba(255, 255, 255, .24); }
  dialog[open] { animation: sheet-in .45s var(--ease-out) both; }
  dialog.is-closing { animation: sheet-out .22s ease-in both; }
  dialog.is-closing::backdrop { animation: fade-out .22s ease-in both; }
}
@media (max-width: 380px) {
  .key { --kh: 46px; }
  .br { display: none; }
  .lnav-title span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .digit.is-cur { background: #ddd; }
  .s-big.is-blink { visibility: visible; }
  .paper { transform: none; }
}

/* ---------- colinha dialog: the cola assembles row by row, then the ways to take it ---------- */
#dlg-cola { width: min(820px, calc(100vw - 24px)); }
.cola-dlg .dlg-body { display: grid; gap: 24px; }
.cola-stage { display: grid; place-items: center; padding: 4px 0; }
.cola-stage .poster { width: min(100%, 300px); }
@media (min-width: 761px) {
  .cola-dlg .dlg-body { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; gap: 32px; }
  /* the whole poster fits the dialog's height (an iPad on its side): its width follows the height left for it */
  .cola-stage .poster { width: 100%; width: min(100%, max(220px, (min(86svh, 820px) - 160px) * .55)); }
  .cola-dlg .share-acts { grid-template-columns: minmax(0, 1fr); }
}
.cola-dlg .p-row { cursor: default; }
.cola-dlg .p-row:hover { background: none; }
/* phones: the colinha is a full screen of its own, not a sheet: the poster as big as the screen allows, the actions pinned at the bottom */
@media (max-width: 760px) {
  dialog#dlg-cola { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
  dialog#dlg-cola::before { display: none; }
  .cola-dlg { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .cola-dlg .dlg-body { display: flex; flex-direction: column; gap: 16px; }
  .cola-dlg .cola-stage { flex: 1; min-height: 0; align-content: center; }
  .cola-dlg .cola-stage .poster { width: min(100%, 320px, max(144px, (100vh - 360px) * .6)); width: min(100%, 320px, max(144px, (100dvh - 360px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .6)); }
  .cola-dlg .share-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cola-dlg .share-acts .btn { min-height: 52px; padding-inline: 12px; font-size: 15px; }
  .cola-dlg .share-acts .btn.wa { font-size: 17px; }
  .cola-dlg .share-acts .or { display: none; }
  .cola-dlg .share-acts #sh-again { min-height: 44px; }
}
.is-building .p-row .p-boxes > * { opacity: 0; }
.share-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.share-acts .btn { width: 100%; }
.share-acts .btn.wa { grid-column: 1 / -1; min-height: 54px; font-size: 18px; }
.share-acts #sh-img { grid-column: 1 / -1; }
.share-acts .or { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin: 4px 0; color: var(--muted); font: 500 14px/1 var(--f-sans); }
.share-acts .or::before, .share-acts .or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
.share-acts .or::before { transform-origin: right; }
.share-acts .or::after { transform-origin: left; }
.share-acts #sh-again { grid-column: 1 / -1; min-height: 44px; font-size: 16px; }
/* once the cola is stamped, the ways to take it rise one after the other */
.share-acts > :nth-child(2) { --i: 1; }
.share-acts > :nth-child(3) { --i: 2; }
.share-acts > :nth-child(4) { --i: 3; }
.share-acts > :nth-child(5) { --i: 4; }
.share-acts.is-waiting { pointer-events: none; }
.share-acts.is-waiting > * { opacity: 0; }
.share-acts.is-in > * { animation: act-in .8s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.share-acts.is-in > .or { animation: fade-in .6s ease backwards; animation-delay: calc(var(--i) * 80ms); }
.share-acts.is-in .or::before, .share-acts.is-in .or::after { animation: or-line .9s var(--ease-out) backwards; animation-delay: calc(var(--i) * 80ms + 60ms); }
@keyframes act-in { from { opacity: 0; translate: 0 18px; scale: .94; } }
@keyframes or-line { from { transform: scaleX(0); } }
.btn.wa { --top: #3fdc7c; --bot: #1db352; --edge: #0b5c2a; --lip: rgba(255, 255, 255, .5); --ring: #3fdc7c; color: #052e16; font-weight: 600; }
.btn.wa svg { width: 20px; height: 20px; }

/* ---------- home: apuração teaser + share ---------- */
.apu-teaser {
  margin-top: 56px; display: grid; gap: 24px 32px; align-items: center; padding: clamp(24px, 4vw, 40px); padding: round(clamp(24px, 4vw, 40px), 4px); border-radius: 32px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(41, 151, 255, .18), transparent 55%), var(--card);
}
@media (min-width: 900px) { .apu-teaser { grid-template-columns: minmax(0, 1fr) auto; } }
.apu-teaser h3 { margin: 0; font: 700 clamp(26px, 3vw, 34px)/1.1 var(--f-sans); letter-spacing: -.03em; }
.apu-teaser p { margin: 8px 0 0; color: var(--muted); font-size: 17px; line-height: 1.45; max-width: 52ch; }
.apu-teaser .btn { min-width: 220px; }
.apu-acts { display: grid; gap: 8px; }
.apu-teaser .aviso-ios { grid-column: 1 / -1; margin: 0; font-size: 15px; }
/* the notice toggle: a bell to ask for it, a check once it is on */
.aviso-btn.is-on .a-off, .aviso-btn:not(.is-on) .a-on, .aviso-link.is-on .a-off, .aviso-link:not(.is-on) .a-on { display: none; }
.aviso-btn.is-on { color: var(--go); }
.aviso-link {
  appearance: none; border: 0; background: none; cursor: pointer; grid-column: 1 / -1; justify-self: center;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px; color: var(--muted); font: 500 15px/1.3 var(--f-sans); letter-spacing: -.01em; transition: color .2s;
}
.aviso-link svg { width: 17px; height: 17px; flex: none; }
.aviso-link.is-on, .aviso-link .b-tick { color: var(--go); }
.aviso-ios { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.share-acts .aviso-ios { grid-column: 1 / -1; text-align: center; }
.share-acts > :nth-child(6) { --i: 5; }
.share-card { margin: 48px auto 0; max-width: 760px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.share-card .btn { width: 100%; }
.share-card .btn.wa { grid-column: 1 / -1; min-height: 56px; font-size: 18px; }

/* ---------- apuração page ---------- */
/* the results page gets to the numbers fast: a short title block */
.apu-hero { padding-bottom: 0; }
.apu-sec { padding-top: 16px; }
.apu-hero .center-head { padding-block: 16px 0; }
.apu-hero .hero-eyebrow { margin-bottom: 4px; font-size: 16px; color: var(--muted); }
.apu-hero .h1 { font-size: clamp(32px, 4.4vw, 56px); }
.apu-hero .h1, .apu-hero .h1 span { text-wrap: balance; }
.nw { white-space: nowrap; }
#live-t, .live-sub { text-wrap: balance; }
.race-rule { text-wrap: pretty; }
.live-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 8px 16px 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font: 500 15px/1.3 var(--f-sans); color: var(--ink-2);
}
.live-pill b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.apu-uf { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.races { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.race:not([hidden]) { animation: panel-in .5s var(--ease-out) backwards; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
/* the race tabs, held under the nav: uppercase labels, a line sliding under the chosen one,
   a divider between the races won by majority and the proportional ones; on phones the bar scrolls sideways */
.apu-tabs {
  position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 20;
  display: flex; align-items: stretch; gap: 4px; width: min(100%, 880px); margin: 0 auto 16px; padding: 4px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: 999px; background: rgba(var(--glass), .86); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 40px -20px rgba(0, 0, 0, .85);
}
.apu-tabs::-webkit-scrollbar { display: none; }
/* the marker: a line under the chosen label (JS gives it the label's and the tab's box as --nl/--nw and --il/--iw/--it/--ih) */
.apu-ink { position: absolute; left: var(--nl, 0); bottom: 12px; width: var(--nw, 0); height: 3px; border-radius: 2px; background: var(--blue-hi); transition: left .5s var(--spring), top .5s var(--spring), width .5s var(--spring), height .5s var(--spring); }
/* each tab is a whole segment of the bar: wide and 56px tall, so a finger finds it, and it lights up under the touch */
.apu-tab {
  appearance: none; position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 20px; border: 0; border-radius: 999px; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  color: var(--muted); font: 700 14px/1 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: color .25s, background-color .2s;
}
.apu-tab:active { background-color: rgba(255, 255, 255, .1); transition-duration: 0s; }
.apu-tab[aria-selected="true"] { color: var(--ink); }
.apu-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
@keyframes t-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--go) 70%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
.t-sep { flex: none; width: 1px; margin: 16px 4px; background: rgba(255, 255, 255, .16); }
@media (hover: hover) { .apu-tab:not([aria-selected="true"]):hover { color: var(--ink-2); background-color: rgba(255, 255, 255, .05); } }
@media (max-width: 900px) { .apu-tab { padding: 0 12px; font-size: 13px; } }
/* phones: one wide picker held under the nav instead of the tabs; it opens a sheet with every race */
.apu-pick { display: none; }
@media (max-width: 560px) {
  .apu-tabs { display: none; }
  .apu-pick {
    appearance: none; position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 64px; margin: 0 0 16px; padding: 8px 20px; border-radius: 20px; cursor: pointer; text-align: left; touch-action: manipulation;
    color: var(--ink); border: 1px solid color-mix(in srgb, var(--blue-hi) 45%, rgba(255, 255, 255, .12));
    background: rgba(var(--glass), .9); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 40px -20px rgba(0, 0, 0, .85); transition: transform .2s var(--ease-out);
  }
  .apu-pick:active { transform: scale(.98); }
  .apu-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .ap-t { display: grid; gap: 4px; flex: 1; min-width: 0; }
  .ap-k { font: 600 11px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .ap-v { font: 700 18px/1.15 var(--f-sans); letter-spacing: -.01em; }
  .apu-pick svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
}
/* the race sheet: big rows, the chosen one checked */
.race-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.race-opt { appearance: none; width: 100%; min-height: 64px; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid transparent; border-radius: 16px; background: var(--card-2); color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation; transition: transform .2s var(--ease-out), background-color .2s; }
.race-opt:active { transform: scale(.98); }
.ro-t { display: grid; gap: 4px; flex: 1; min-width: 0; }
.ro-t b { font: 600 17px/1.2 var(--f-sans); }
.ro-t small { font-size: 14px; color: var(--muted); }
.race-opt svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--blue-hi); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.race-opt.is-cur { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.race-opt.is-cur svg { visibility: visible; }
.ro-sep { margin: 8px 4px 0; font: 700 12px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* no state chosen yet: an app-like empty screen with one clear step */
.race.is-pick .race-h p, .race.is-pick .race-rule, .race.is-pick .dep-tools { display: none; }
.race-empty { display: grid; justify-items: center; gap: 8px; padding: 16px 0 8px; text-align: center; }
.re-ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; color: var(--blue-hi); background: color-mix(in srgb, var(--blue-hi) 14%, transparent); }
.re-ic svg { width: 28px; height: 28px; }
.race-empty b { font: 700 20px/1.2 var(--f-sans); letter-spacing: -.01em; color: var(--ink); }
.race-empty > span:not(.re-ic) { max-width: 32ch; color: var(--muted); font-size: 15px; line-height: 1.45; }
.race-empty .btn { margin-top: 16px; min-width: 240px; }
@media (max-width: 560px) { .race-empty .btn { width: 100%; } }
.race-more { display: flex; justify-content: center; }
/* deputies: where the state stands, most voted / elected, and a search */
.dep-tools { display: grid; gap: 12px; }
.dep-info { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.dep-info b { font-weight: 600; color: var(--go); }
.dep-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.seg button { appearance: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 14px/1 var(--f-sans); cursor: pointer; touch-action: manipulation; transition: color .2s, background-color .2s; }
.seg button[aria-pressed="true"] { color: var(--ink); background: var(--card-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-hi) 55%, transparent); }
.seg button:disabled, .seg button[aria-disabled="true"] { opacity: .45; }
.seg button:disabled { cursor: not-allowed; }
.dep-search { position: relative; flex: 1 1 220px; max-width: 360px; }
.dep-search svg { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.dep-search input { width: 100%; min-height: 44px; padding: 0 16px 0 40px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .25); color: var(--ink); font: 400 16px/1 var(--f-sans); outline: none; transition: border-color .2s, box-shadow .2s; }
.dep-search input:focus { border-color: var(--blue-hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-hi) 25%, transparent); }
.dep-empty { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 560px) { .seg { width: 100%; } .seg button { flex: 1; } .dep-search { max-width: none; } }
/* the way into the Câmara: a small chip next to the live one, on the Dep. Federal card */
.race-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cam-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer; touch-action: manipulation;
  color: var(--ink); font: 600 13px/1 var(--f-sans); background: rgba(255, 255, 255, .05); border: 1px solid color-mix(in srgb, var(--blue-hi) 45%, transparent);
  transition: background-color .2s, transform .2s var(--ease-out);
}
.cam-chip:active { transform: scale(.97); background-color: rgba(255, 255, 255, .1); }
.cam-chip b { font-variant-numeric: tabular-nums; }
.cam-of { margin-left: -4px; color: var(--muted); }
.cam-ic { width: 24px; height: 14px; fill: none; stroke: var(--blue-hi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 4.4; }
.cam-go { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .cam-chip:hover { background-color: rgba(255, 255, 255, .09); } }
#dlg-camara { width: min(760px, calc(100vw - 24px)); }
.dlg-body.camara { display: grid; gap: 16px; }
/* the Câmara: 513 seats on a half-moon, lit as the TSE confirms them */
.cam-plot { position: relative; width: 100%; max-width: min(640px, calc((86svh - 320px) * 1.9)); margin: 0 auto; }
.cam-plot svg { display: block; width: 100%; height: auto; }
.seat { fill: rgba(255, 255, 255, .12); transition: fill .4s ease var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .seat { transition: none; } }
.cam-mid { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; display: grid; justify-items: center; text-align: center; }
.cam-n { font: 800 clamp(32px, 6vw, 48px)/1 var(--f-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cam-mid span { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .cam-n { font-size: 28px; } .cam-mid span { font-size: 11px; } }
.cam-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; font: 600 14px/1 var(--f-sans); letter-spacing: .02em; }
.cam-legend li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cam-legend i { width: 12px; height: 12px; border-radius: 4px; }
.cam-legend b { font-variant-numeric: tabular-nums; }
.cam-legend .is-open { color: var(--muted); font-weight: 500; }
#dlg-camara .race-rule { margin: 0; text-align: center; }
/* the pop-up's way to the full page */
.cam-all { justify-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 999px; color: var(--blue-hi); font: 600 15px/1 var(--f-sans); text-decoration: none; }
.cam-all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cam-all:active { scale: .97; }

/* ---------- /camara: the elected Câmara, state by state ---------- */
.crumbs ol { list-style: none; margin: 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font: 500 14px/1.3 var(--f-sans); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '›'; color: var(--muted); opacity: .7; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.cm-lede { margin: 8px auto 0; max-width: 40ch; color: var(--muted); font-size: 16px; line-height: 1.45; text-wrap: balance; }
.live-pill.is-done .dot { background: var(--muted); box-shadow: none; animation: none; }
.cm-wrap { display: grid; gap: 16px; }
.cm-card { background: var(--card); border-radius: 16px; padding: 24px; display: grid; gap: 16px; min-width: 0; }
.cm-card .cam-plot { max-width: 640px; }
.cm-card .race-rule { margin: 0; text-align: center; }
/* the legend doubles as a party filter */
.cm-card .cam-legend button { appearance: none; border: 1px solid transparent; background: none; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; touch-action: manipulation; transition: background-color .2s, border-color .2s; }
.cm-card .cam-legend button:active { scale: .97; }
.cm-card .cam-legend button[aria-pressed="true"] { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
@media (hover: hover) { .cm-card .cam-legend button:hover { background-color: rgba(255, 255, 255, .06); } }
.cm-card .cam-legend { gap: 4px 4px; }
.cm-list-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.cm-list-h h2 { margin: 0; font: 700 28px/1.1 var(--f-sans); letter-spacing: -.02em; }
.cm-list-h p { margin: 0; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.cm-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cm-search { max-width: none; flex: 1 1 280px; }
.cm-filters { display: flex; gap: 8px; flex: 1 1 280px; }
.cm-filter { appearance: none; flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .25); color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color .2s, background-color .2s; }
.cm-filter:active { scale: .98; }
.cm-filter.is-set { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.cf-k { font: 600 12px/1 var(--f-sans); color: var(--muted); }
.cf-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.2 var(--f-sans); }
.cm-filter svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cm-list { display: grid; gap: 24px; }
.cm-uf h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; padding: 0 4px 8px; border-bottom: 1px solid var(--line); font: 700 18px/1.2 var(--f-sans); }
.cm-uf h3 small { font: 500 13px/1.2 var(--f-sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.cm-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.cm-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.cm-ph { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #2a2a2d; }
.cm-who { display: grid; gap: 4px; min-width: 0; }
.cm-who b { font: 600 15px/1.2 var(--f-sans); overflow-wrap: anywhere; }
.cm-who span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cm-who i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cm-end { display: grid; justify-items: end; gap: 4px; }
.cm-votes { font: 600 13px/1.2 var(--f-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-how { appearance: none; position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--go) 45%, transparent); background: color-mix(in srgb, var(--go) 12%, transparent); color: var(--go); font: 700 11px/1 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.cm-how::after { content: ''; position: absolute; inset: -12px -4px; }
.cm-how .c-i { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cm-empty { margin: 0; color: var(--muted); text-align: center; padding: 16px 0; }
.ro-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: 1px; }
@media (max-width: 560px) {
  .cm-card { padding: 16px; border-radius: 16px; }
  .cm-list-h h2 { font-size: 24px; }
  .cm-card .cam-legend { gap: 0; }
  .cm-card .cam-legend button { min-height: 32px; padding: 0 8px; font-size: 13px; }
  .cm-rows { grid-template-columns: minmax(0, 1fr); }
}

/* the pop-up: progress, half-moon, the benches as a ranking, the 27 states as tiles */

.race-note { margin: 0; padding: 12px 16px; border-radius: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.45; background: color-mix(in srgb, var(--go) 10%, transparent); border: 1px solid color-mix(in srgb, var(--go) 35%, transparent); }
.race-note.is-t2 { background: color-mix(in srgb, #64a8ff 10%, transparent); border-color: color-mix(in srgb, #64a8ff 35%, transparent); }
.race { background: var(--card); border-radius: 16px; padding: 24px; display: grid; gap: 12px; min-width: 0; }
/* the title never breaks: when it and the live chip don't fit side by side, the chip goes under it */
.race-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; }
.race-h h2, .race-h h1 { white-space: nowrap; }
.race-h h2, .race-h h1 { margin: 0; font: 700 clamp(24px, 2.6vw, 30px)/1.1 var(--f-sans); letter-spacing: -.03em; }
.race-h p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
/* the count meter: how much of the race is in, across the whole card */
.race-prog { display: grid; gap: 8px; padding: 12px 16px 16px; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.rp-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rp-pct { font: 800 clamp(24px, 3vw, 32px)/1 var(--f-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rp-lab { font-size: 15px; color: var(--ink-2); }
.rp-sec { margin-left: auto; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.race-prog.is-new .rp-pct { animation: num-pop .9s var(--spring); }
.race-live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font: 600 13px/1 var(--f-sans); white-space: nowrap; color: var(--muted); background: rgba(255, 255, 255, .06); }
.race-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.race.is-live .race-live { color: var(--go); background: color-mix(in srgb, var(--go) 13%, transparent); }
.race.is-live .race-live::before { animation: t-live 1.8s var(--ease-out) infinite; }
.race .race-live.is-decided { color: #03240f; background: var(--go); }
.race .race-live.is-runoff { color: #04163a; background: #64a8ff; }
.race .race-live.is-decided::before, .race .race-live.is-runoff::before { animation: none; background: currentColor; }
/* the count meter is not a vote: its own hue (never the candidates' bar color) in each theme */
:root { --meter: #30d158; }
html[data-tema="verde"] { --meter: #5aa9ff; }
html[data-tema="azul"] { --meter: #34d27b; }
.prog { position: relative; width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.prog i { position: relative; display: block; height: 100%; width: 0; border-radius: inherit; overflow: hidden; transition: width 1.3s var(--ease-out); background: var(--meter); }
/* while the count runs, a glint keeps travelling along what is already counted */
.race.is-live .prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); animation: prog-glint 2.2s var(--ease-io) infinite; }
@keyframes prog-glint { to { transform: translateX(100%); } }
.is-counting .t2-prog .prog i::after, .is-counting .tv-prog i::after, .is-counting .th-prog .prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-100%); animation: prog-glint 2.2s var(--ease-io) infinite; }
.t2-prog .prog, .tv-prog, .th-prog .prog { overflow: visible; } /* the green's glow shows around it */
@media (prefers-reduced-motion: reduce) { .is-counting .prog i::after { animation: none; } }
@keyframes num-pop { 0% { transform: scale(1); } 35% { transform: scale(1.08); color: var(--blue-hi); } 100% { transform: scale(1); } }
.rp-pct, .l-rank { display: inline-block; transform-origin: left center; }
.race-rule { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.race-rule .flag { flex: none; width: 2px; height: 16px; margin-inline: 4px; background: repeating-linear-gradient(to bottom, var(--ink-2) 0 4px, transparent 4px 8px); }

/* each candidate is a lane: the photo rides the bar up to its share of the valid votes */
/* each candidate is a card of its own: a translucent face, a lit top edge, 8px apart */
.lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lane {
  --w: 0%; position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center;
  padding: 12px 16px 8px 12px; border-radius: 16px;
  background-color: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 20px -14px rgba(0, 0, 0, .75);
  transition: transform .85s var(--spring), background-color .8s ease;
}
.lane.is-moved { background-color: color-mix(in srgb, var(--blue-hi) 12%, transparent); transition-duration: .85s, .15s; }
.l-rank { position: relative; align-self: start; padding-top: 4px; font: 700 15px/1 var(--f-sans); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.l-rank.is-up, .l-rank.is-down { animation: num-pop .7s var(--spring); }
.l-rank.is-up::after, .l-rank.is-down::after { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); font-size: 9px; line-height: 1; animation: fade-in .3s ease both; }
.l-rank.is-up::after { content: "▲"; color: var(--go); }
.l-rank.is-down::after { content: "▼"; color: var(--fix); }
.l-who { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.l-nm { font: 600 16.5px/1.2 var(--f-sans); letter-spacing: -.015em; overflow-wrap: anywhere; }
.l-pt { font-size: 13px; color: var(--muted); }
.l-st:empty { display: none; }
.l-num { display: grid; justify-items: end; gap: 4px; text-align: right; min-width: 92px; }
.l-pct { font: 800 22px/1 var(--f-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.l-votes { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* how many votes the last release added, floating up and away */
.l-delta { position: absolute; z-index: 2; right: 16px; top: -8px; padding: 4px 8px; border-radius: 6px; font: 700 11.5px/1 var(--f-sans); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--go); background: color-mix(in srgb, var(--go) 15%, transparent); pointer-events: none; animation: delta-up 2s var(--ease-out) both; }
@keyframes delta-up { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 14% { opacity: 1; transform: none; } 72% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-14px); } }
.l-track { grid-column: 2 / -1; position: relative; height: 40px; }
.l-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); }
.l-fill { position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; width: var(--w); border-radius: 4px; background: var(--blue-hi); transition: width 1.3s var(--ease-out); }
.l-ph {
  position: absolute; z-index: 1; top: 50%; left: max(18px, min(var(--w), 100% - 18px)); width: 36px; height: 36px; translate: -50% -50%;
  border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: #2a2a2d;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px color-mix(in srgb, var(--blue-hi) 75%, transparent), 0 6px 14px rgba(0, 0, 0, .45);
  transition: left 1.3s var(--ease-out);
}
/* the finish line: half of the valid votes, where the 1st round is won */
.race.has-line .l-track::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; translate: -50% 0; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .62) 0 4px, transparent 4px 8px); }
/* the TSE's word on a candidate: a solid tag, and the whole card lit in the same color */
.c-st { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; font: 800 12px/1 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: var(--go); color: #03240f; }
.c-st svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.c-st.is-t2 { background: #64a8ff; color: #04163a; }
.c-st.is-sup { background: #f2c94c; color: #3a2a00; }
.c-st.is-out { background: rgba(255, 255, 255, .12); color: var(--muted); }
/* our arithmetic, not yet the TSE's word: the same green, outlined instead of solid */
.c-st.is-math { background: color-mix(in srgb, var(--go) 14%, transparent); color: var(--go); box-shadow: inset 0 0 0 1.5px var(--go); }
.c-st.is-t2.is-math { background: color-mix(in srgb, #64a8ff 14%, transparent); color: #8fc1ff; box-shadow: inset 0 0 0 1.5px #64a8ff; }
.c-st.is-new { animation: stamp .55s var(--spring) both; }
/* labels with a meaning to explain: a tap shows it; the hit area reaches past the small label */
button.c-st { appearance: none; border: 0; position: relative; cursor: pointer; touch-action: manipulation; }
button.c-st::after { content: ''; position: absolute; inset: -12px -4px; }
button.c-st:active { scale: .96; }
.c-st .c-i { width: 14px; height: 14px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.lane.is-elected { border-color: color-mix(in srgb, var(--go) 60%, transparent); background-color: color-mix(in srgb, var(--go) 10%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px color-mix(in srgb, var(--go) 25%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--go) 70%, transparent); }
.lane.is-runoff { border-color: color-mix(in srgb, #64a8ff 55%, transparent); background-color: color-mix(in srgb, #64a8ff 8%, transparent); }
/* the elected one gets the trophy: a gold ring on the photo and a medal riding with it */
.lane.is-elected .l-ph { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #ffd34d, 0 0 20px rgba(255, 211, 77, .55); }
.l-medal {
  position: absolute; z-index: 2; top: 50%; left: max(18px, min(var(--w), 100% - 18px)); width: 24px; height: 24px; translate: 8px -28px;
  display: none; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff2a8, #ffd34d 45%, #c99400);
  box-shadow: 0 0 0 2px var(--card), 0 4px 10px rgba(0, 0, 0, .45); transition: left 1.3s var(--ease-out);
}
.l-medal svg { width: 14px; height: 14px; fill: #8a5a00; stroke: #5c3b00; stroke-width: 1.2; stroke-linejoin: round; }
.lane.is-elected .l-medal { display: grid; }
/* unlocked live: the medal pops, sparks burst around it, the card pulses once */
.lane.is-won .l-medal { animation: medal-pop .9s var(--spring) both; }
.lane.is-won .l-medal::before, .lane.is-won .l-medal::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffd34d 0 2px, transparent 2.5px) 0 0 / 12px 12px;
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 60%, transparent 62%); mask: radial-gradient(circle, transparent 38%, #000 40%, #000 60%, transparent 62%);
  animation: sparks 1.1s var(--ease-out) .15s both;
}
.lane.is-won .l-medal::after { inset: -20px; animation-delay: .3s; background-size: 16px 16px; }
.lane.is-won { animation: won-pulse 1.4s var(--ease-out); }
@keyframes medal-pop { 0% { scale: 0; rotate: -40deg; } 60% { scale: 1.35; rotate: 8deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes sparks { 0% { opacity: 0; scale: .4; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.5; } }
@keyframes won-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 211, 77, .55); } 100% { box-shadow: 0 0 0 16px rgba(255, 211, 77, 0); } }
@media (max-width: 560px) { .lane.is-elected .l-medal { left: max(13px, min(var(--w), 100% - 13px)); width: 20px; height: 20px; translate: 6px -24px; } .l-medal svg { width: 12px; height: 12px; } }

/* the live line under the title: when the page last checked the TSE, and a ring filling up to the next check */
.live-sub { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; font: 500 13.5px/1.3 var(--f-sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.live-ring { --t: 0; flex: none; width: 13px; height: 13px; border-radius: 50%; background: conic-gradient(var(--blue-hi) calc(var(--t) * 1turn), rgba(255, 255, 255, .14) 0); }
.live-sub.is-final .live-ring { display: none; }
.live-new { color: var(--go); font-weight: 700; }
.live-pill.is-new { animation: pill-ping 1.3s var(--ease-out); }
@keyframes pill-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-hi) 60%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.race-f { color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.race-f b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.race-msg { color: var(--muted); font-size: 15.5px; line-height: 1.5; margin: 0; }
.race-msg a, .apu-src a { color: var(--blue-hi); }
.apu-src { text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 28px auto 0; max-width: 70ch; }
@media (max-width: 560px) {
  /* phones: the name on its own line, party and vice under it in one line, nothing breaking mid-phrase */
  .lane {
    grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "rank nm nm" "rank pt pt" ". st st" ". track track" ". pct votes";
    column-gap: 8px; row-gap: 8px; padding: 20px 20px 16px 12px; border-radius: 20px;
  }
  .l-track { height: 28px; }
  .l-ph { left: max(13px, min(var(--w), 100% - 13px)); width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px color-mix(in srgb, var(--blue-hi) 75%, transparent), 0 4px 10px rgba(0, 0, 0, .45); }
  .l-who, .l-num { display: contents; }
  .l-rank { grid-area: rank; }
  .l-nm { grid-area: nm; font-size: 16px; text-wrap: balance; }
  .l-pt { grid-area: pt; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .l-st { grid-area: st; }
  .l-pct { grid-area: pct; justify-self: start; font-size: 20px; }
  .l-votes { grid-area: votes; justify-self: end; align-self: center; }
  .l-track { grid-area: track; }
  .pl-lg { display: none; }
  .race-f { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
  .race-f span:last-child { grid-column: 1 / -1; }
  .live-pill { font-size: 14px; }
  .race-prog { padding: 16px; }
  .race { padding: 16px; }
  .rp-sec { margin-left: 0; }
  .apu-teaser .btn, .share-card .btn { min-width: 0; }
  .share-card, .share-acts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- private dashboard: Geckoboard-style bento, in the site's colors (the theme's accent for every number drawn) ---------- */
.pn { padding-block: 92px 64px; }
.pn .wrap { max-width: 1480px; }
.pn-head { text-align: center; display: grid; justify-items: center; margin-bottom: 28px; }
.pn-head .h1 { font-size: clamp(40px, 5vw, 64px); }
.pn-upd { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pn-login { max-width: 420px; margin: 0 auto; display: grid; gap: 12px; }
.pn-login label { font-weight: 600; }
.pn-login input { min-height: 52px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .25); color: var(--ink); padding: 0 16px; font-size: 16px; }
.pn-empty { color: var(--muted); font-size: 14px; list-style: none; }
.board li.pn-empty { display: block; border: 0; padding: 8px 0; }

.bento { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; grid-auto-flow: row dense; }
.tile { container-type: size; position: relative; overflow: hidden; min-width: 0; background: var(--card); border-radius: 16px; padding: 16px 20px; display: flex; flex-direction: column; border: 1px solid var(--line); }
.pn-lab { display: block; font: 600 14px/1.25 var(--f-sans); color: var(--muted); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pn-lab .dot { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.t-sub { margin-top: auto; font-size: 13px; color: var(--muted); }
.t-num { display: block; white-space: nowrap; font-weight: 700; letter-spacing: -.045em; line-height: .9; color: var(--ink); margin-top: auto; }
/* row 1: hero (2x2) · four KPIs as one 2x2 block · actions (2x2) */
.t-hero { grid-column: span 2; grid-row: span 2; }
.t-hero .t-num { font-size: min(34cqw, 50cqh); }
.t-kpis { grid-column: span 2; grid-row: span 2; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); min-width: 0; }
.t-kpi .t-num { font-size: min(30cqw, 46cqh); }
.t-cmp { margin-top: 8px; font: 600 15px/1.2 var(--f-sans); color: var(--muted); }
.t-cmp.is-up { color: var(--go); }
.t-cmp.is-down { color: var(--fix); }
.spark { width: 100%; height: 20%; min-height: 36px; margin-top: 12px; overflow: visible; color: var(--blue-hi); }
.spark-end { stroke: var(--card); }
.t-live .dot { background: var(--go); color: var(--go); }
.t-acts { grid-column: span 2; grid-row: span 2; }
.acts4 { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pn-act { container-type: size; min-width: 0; border-radius: 16px; background: var(--card-2); padding: 12px 16px; display: flex; flex-direction: column; overflow: hidden; }
.pn-act b { margin-top: auto; font-weight: 700; letter-spacing: -.04em; line-height: .9; white-space: nowrap; font-size: min(30cqw, 52cqh); }
.pn-act span { font-size: 13px; color: var(--muted); line-height: 1.25; }
.pn-act small { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.25; font-variant-numeric: tabular-nums; }
/* row 2: four highlights for advertisers · row 3: chart (4x2) and the map of visits (2x2) */
.t-hls { grid-column: 1 / -1; grid-row: span 1; }
.hls4 { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; min-height: 0; }
.t-chart { grid-column: span 3; grid-row: span 2; }
.t-map { grid-column: span 3; grid-row: span 2; }
.pn-map { flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; margin: 8px 0 4px; }
/* the map and, beside it, the blocks of every state in order; one under the other in a narrow card */
.pn-map-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; min-height: 0; }
.pn-map-g { min-height: 0; display: grid; place-items: center; }
.pn-map svg { width: 100%; height: 100%; min-height: 0; overflow: visible; }
.pn-ufs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 4px; min-height: 0; }
.pn-ufs li { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 0 8px; border-radius: 6px; background: color-mix(in srgb, #ffd400 var(--k, 0%), #2f2f35); font: 600 12px/1 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--ink); transition: box-shadow .15s; }
.pn-ufs li b { font-weight: 700; letter-spacing: .02em; }
.pn-ufs li span { overflow: hidden; text-overflow: ellipsis; }
.pn-ufs li.is-lt { color: #1a1400; }
.pn-ufs li.is-zero { color: var(--muted); }
.pn-ufs li.is-hl { box-shadow: inset 0 0 0 2px #fff; }
.pn-uf.col.is-hl { stroke: #fff; stroke-width: 2.5; }
@container (max-width: 520px) {
  .pn-map-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; }
  .pn-map svg { height: auto; }
  .pn-ufs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 38px; }
  .pn-ufs li { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 0 8px; } /* the initials over the number: any number fits */
}
/* each state: one hue, the yellow, by --k (none: the card's grey); a thin line of the card between them */
.pn-uf.col { display: inline; height: auto; fill: color-mix(in srgb, #ffd400 var(--k, 0%), #2f2f35); stroke: var(--card); stroke-width: 1.5; stroke-linejoin: round; cursor: pointer; transition: fill .2s; }
.pn-uf.col:hover, .pn-uf.col:focus-visible { stroke: #fff; stroke-width: 2.5; outline: none; }
.pn-map-k { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pn-map-k i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, #ffd400 22%, #2f2f35), #ffd400); }
.pn-tile.col { height: auto; align-items: center; justify-content: center; border-radius: 8px; font: 700 11px/1 var(--f-sans); letter-spacing: .02em; color: var(--ink); background: color-mix(in srgb, var(--blue-hi) var(--k, 0%), var(--card-2)); cursor: default; }
.pn-tile.is-empty { color: var(--muted); }
.pn-tile:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.t-days .days { flex: 1; display: flex; align-items: stretch; gap: 8px; margin-top: 16px; min-height: 0; border-bottom: 1px solid var(--line-2); }
.col.day { flex: 1; max-width: 56px; flex-direction: column; justify-content: flex-end; gap: 8px; }
.col.day i { max-width: none; }
.col.day span { font-size: 11px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
/* rows 3-4: four equal quadrants */
.t-q { grid-column: span 3; grid-row: span 2; }

.chart { flex: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; margin-top: 16px; min-height: 0; }
.chart-y { position: relative; }
.chart-y span { position: absolute; right: 8px; transform: translateY(50%); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-plot { position: relative; display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 2px; align-items: end; border-bottom: 1px solid var(--line-2); min-height: 0; }
.chart-plot .grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); pointer-events: none; }
.col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; }
.col i { display: block; width: 100%; max-width: 24px; height: var(--h, 0%); background: var(--blue-hi); border-radius: 4px 4px 0 0; transition: height .6s var(--ease-out), background-color .15s; }
.col:hover i, .col:focus-visible i { background: color-mix(in srgb, var(--blue-hi) 65%, #fff); }
.col:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); border-radius: 4px; }
.chart-x { grid-column: 2; display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 2px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.chart-x span { white-space: nowrap; overflow: visible; }
.tip { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); background: #f5f5f7; color: #111; border-radius: 10px; padding: 8px 12px; font: 500 12.5px/1.35 var(--f-sans); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); white-space: nowrap; }
.tip b { display: block; font-size: 15px; font-weight: 700; }

/* leaderboards */
.board { list-style: none; margin: 8px 0 0; padding: 0; display: grid; align-content: start; overflow: hidden; flex: 1; min-height: 0; }
.board li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.board li:first-child { border-top: 0; }
/* the dashboard's leads: name and company (a tap answers on WhatsApp), then the place and when */
.board.leads li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.board.leads a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; text-decoration: none; }
.board.leads a:hover { text-decoration: underline; }
.board.leads small { font-size: 12px; color: var(--muted); }
.b-rk { font: 600 12px/1 var(--f-sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.b-nm { font-size: 15px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.b-v { font: 700 17px/1 var(--f-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.b-bar { grid-column: 2 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.b-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--blue-hi); border-radius: 0 2px 2px 0; transition: width .6s var(--ease-out); }

/* devices: three big shares */
.dev3 { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; min-height: 0; }
.pn-dev { container-type: size; min-width: 0; display: flex; flex-direction: column; border-radius: 16px; background: var(--card-2); padding: 12px 16px; overflow: hidden; }
.pn-dev b { margin-top: auto; font-weight: 700; letter-spacing: -.04em; line-height: .9; white-space: nowrap; font-size: min(30cqw, 46cqh); }
.pn-dev span { font-size: 13px; color: var(--muted); }
.pn-dev small { font-size: 12px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }

@media (max-width: 1099px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-q { grid-column: span 2; }
  .t-chart, .t-map { grid-column: span 4; }
}
@media (max-width: 699px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; }
  .t-hero, .t-kpis, .t-acts, .t-chart, .t-uf, .t-q, .t-hls, .t-map { grid-column: span 2; }
  .t-uf, .t-q { grid-row: span 3; }
  .t-map { grid-row: span 5; }
  .t-hls { grid-row: span 2; }
  .hls4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 16px 16px; border-radius: 16px; }
}

/* hover feedback only for devices that can hover (no sticky hover on touch screens) */
@media (hover: hover) {
  /* the key rises a little and a glint crosses it; pressed, it still sinks */
  .cap:hover:not(:active):not(:disabled), .btn-s:hover:not(:active), .btn:hover:not(:active):not(:disabled) {
    filter: brightness(1.08); transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--lip), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 calc(var(--drop) + 1px) 0 var(--edge), 0 calc(var(--drop) + 9px) 18px rgba(0, 0, 0, .45);
  }
  .cap:hover::after, .btn-s:hover::after, .btn:hover::after { animation: glint .8s var(--ease-out); }
  .btn:hover > svg:not(.b-tick) { transform: scale(1.12) rotate(-8deg); }
  .btn.wa:hover > svg { transform: none; animation: wiggle .7s var(--ease-out); }
  .btn.ghost:hover:not(:active) { filter: none; transform: none; color: var(--ink); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
  .btn.ghost:hover > svg { transform: rotate(-200deg); }
  .btn.ghost.is-spin > svg { transform: rotate(-360deg); }
  .aviso-btn:hover > svg.a-off, .aviso-link:hover > svg.a-off { transform: none; animation: wiggle .7s var(--ease-out); }
  .aviso-link:hover { color: var(--ink); }
  .t-item:not(.is-now) .t-btn:hover { background: rgba(255, 255, 255, .15); color: var(--ink); }
  .t-item.is-done:not(.is-now) .t-btn:hover { background: rgba(255, 255, 255, .3); }
  .link-s:hover { text-decoration: underline; text-underline-offset: 3px; }
  .u-sw:hover, .u-btn:hover { color: rgba(20, 19, 17, .95); }
  .key:hover { filter: brightness(1.08); }
  .fine button:hover { text-decoration: underline; text-underline-offset: 3px; }
  .paper:hover { transform: rotate(0deg) translateY(-6px); }
  .p-row:hover { background: #eef2fa; }
  .v-card:hover { transform: translateY(-4px) scale(1.01); background: #232326; }
  .check a:hover { text-decoration: underline; }
  .uf-opt:hover { border-color: rgba(255, 255, 255, .3); }
  .res:hover { border-color: rgba(255, 255, 255, .3); }
  .toast button:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------- print: only the cola, ink friendly ---------- */
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; }
  body > *:not(main) { display: none !important; }
  main > *:not(#cola) { display: none !important; }
  #cola { padding: 0 !important; background: #fff !important; }
  #cola .cola-copy, .desk::before { display: none !important; }
  .cola-grid { display: block !important; }
  .desk { padding: 0 !important; display: block !important; }
  .paper { transform: none !important; max-width: 98mm !important; opacity: 1 !important; }
  .poster { background: #fff !important; color: #111 !important; box-shadow: none !important; border: 1.2px dashed #777; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-star { display: none; }
  .p-tag span { background: #fff !important; color: #111 !important; border: 2px solid #111; box-shadow: none !important; }
  .p-tag svg path { stroke: #fff !important; }
  .p-card { border: 1px solid #111; }
  .p-box { background: #fff !important; border: 1.5px solid #333; color: #111 !important; }
  .p-box.empty { color: transparent !important; }
  .p-row.is-now { background: none !important; }
}

/* ---------- 2º turno (Fato Público): the duel, your state, the map down to each municipality ---------- */
:root { --t2-a: #9085e9; --t2-b: #199e70; --tie: #8a8f86; }
.fp-brand { font-weight: 700; }
.fp-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--blue-hi); color: #061a0e; }
.fp-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* the page: the bar as wide as the dashboard, and a backdrop that moves. Only the brand's greens back there, never
   a candidate's red or blue; still for anyone who turned motion off (the global reduced-motion rule) */
.t2-page { background: transparent; }
.t2-page .wrap { max-width: 2560px; } /* the whole screen, up to an ultra-wide one */
.t2-page .lnav { padding-inline: max(24px, env(safe-area-inset-left, 0px)); }
.t2-page .lnav-bar { max-width: 2512px; }
.t2-page .section { background: transparent; }
.t2-page::before, .t2-page::after, .t2-page main::before { content: ''; position: fixed; pointer-events: none; }
/* two slow lights, drifting against each other */
.t2-page::before {
  z-index: -3; inset: -10vmax; will-change: transform; animation: t2-glow-a 32s ease-in-out infinite alternate;
  background:
    radial-gradient(closest-side, rgba(22, 196, 112, .26), transparent) 8% 12% / 64vmax 52vmax no-repeat,
    radial-gradient(closest-side, rgba(0, 160, 150, .2), transparent) 96% 58% / 58vmax 48vmax no-repeat;
}
.t2-page main::before {
  z-index: -2; inset: -10vmax; will-change: transform; animation: t2-glow-b 26s ease-in-out infinite alternate;
  background:
    radial-gradient(closest-side, rgba(120, 230, 160, .1), transparent) 62% 4% / 48vmax 36vmax no-repeat,
    radial-gradient(closest-side, rgba(10, 120, 80, .22), transparent) 30% 100% / 72vmax 52vmax no-repeat;
}
/* a fine grid of dots under the title, fading out; two grids between each other, each brightening and dimming at its
   own pace, so the dots seem to twinkle (only their opacity moves: nothing is redrawn) */
.t2-page::after, .t2-page main::after {
  z-index: -1; inset: 0; will-change: opacity;
  background: radial-gradient(circle, rgba(246, 248, 241, .16) 0 1px, transparent 1.5px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(100% 60% at 50% 0%, #000, transparent 72%); mask-image: radial-gradient(100% 60% at 50% 0%, #000, transparent 72%);
}
.t2-page main::after { content: ''; position: fixed; pointer-events: none; background-position: 12px 12px; animation: t2-dots 6.4s ease-in-out -3.2s infinite alternate; }
.t2-page::after { animation: t2-dots 4.8s ease-in-out infinite alternate; }
@keyframes t2-dots { from { opacity: .15; } to { opacity: 1; } }
@keyframes t2-glow-a { from { transform: translate3d(-4%, -3%, 0) rotate(-6deg) scale(1); } to { transform: translate3d(4%, 3%, 0) rotate(5deg) scale(1.08); } }
@keyframes t2-glow-b { from { transform: translate3d(5%, 2%, 0) rotate(4deg) scale(1.06); } to { transform: translate3d(-4%, -3%, 0) rotate(-5deg) scale(1); } }
@media (max-width: 760px) { .t2-page main::before { display: none; } } /* one light on a phone: lighter on the battery */
/* the cards let a little of it through, with a fine top edge */
.t2-page .race { background: color-mix(in srgb, var(--card) 86%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -32px rgba(0, 0, 0, .7); }
/* compact cards on this page: smaller titles, short subtitles, less padding */
.t2-page .race { padding: 20px; border-radius: 16px; }
.t2-page .t2-card { gap: 12px; }
.t2-page .race-h h2, .t2-page .race-h h1, .t2-page .t2-mt-t h2 { font: 700 20px/1.2 var(--f-sans); letter-spacing: -.02em; }
.t2-page .race-h p, .t2-page .t2-mt-t p { margin-top: 2px; font-size: 13px; line-height: 1.35; }
@media (max-width: 760px) {
  .t2-page .race { padding: 16px; border-radius: 16px; }
  .t2-page .race-h h2, .t2-page .t2-mt-t h2, .t2-page .t2-dt { font-size: 18px; }
  .t2-page .race-h p, .t2-page .t2-mt-t p { font-size: 12px; }
}

/* the top: the sentence, and where the count is (side by side on a computer, stacked on a phone) */
.t2-top { padding: calc(80px + env(safe-area-inset-top, 0px)) 0 12px; }
.t2-top-in { display: grid; gap: 12px; justify-items: center; text-align: center; }
.t2-top-l { display: grid; gap: 4px; justify-items: inherit; }
.t2-eye { margin: 0; font: 600 13px/1.3 var(--f-sans); color: var(--muted); }
.t2-top-r { display: grid; gap: 8px; justify-items: inherit; }
.t2-pill { margin: 0; padding: 8px 16px; font-size: 14px; text-wrap: balance; }
.t2-upd { margin: 0; font: 500 12px/1.4 var(--f-sans); color: var(--muted); font-variant-numeric: tabular-nums; text-wrap: balance; }

/* the duel: two sides facing each other, a small VS seal, one thin bar */
.t2-card { gap: 16px; }
.t2-duel { --ph: 64px; --ca: var(--t2-a); --cb: var(--t2-b); container-type: inline-size; }
.t2-dh { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.t2-dt { margin: 0; display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 700 20px/1.2 var(--f-sans); letter-spacing: -.02em; white-space: nowrap; }
.t2-dt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 14px/1.2 var(--f-sans); letter-spacing: 0; color: var(--muted); }
/* the page's headline, inside the president's card: where the race is, in one sentence (the full screen has its own) */
.t2-lead { margin: 0; font: 700 clamp(17px, 1.25vw, 20px)/1.25 var(--f-sans); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.is-tv .t2-lead { display: none; }
.t2-duel .race-live { flex: none; padding: 4px 12px; min-height: 28px; font-size: 12px; }
.t2-duel.is-live .race-live { color: var(--go); background: color-mix(in srgb, var(--go) 13%, transparent); }
.t2-duel.is-live .race-live::before { animation: t-live 1.8s var(--ease-out) infinite; }
.t2-duel .race-live.is-decided { color: #03240f; background: var(--go); }
.t2-duel.is-pre .race-live::before { display: none; }
.t2-sides { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 8px; }
/* a hairline between the photos, each end in its side's color */
.t2-sides::before { content: ''; position: absolute; top: calc(var(--ph) / 2); left: calc(var(--ph) + 12px); right: calc(var(--ph) + 12px); height: 1px; opacity: .7;
  background: linear-gradient(90deg, var(--ca), transparent 40%, transparent 60%, var(--cb)); }
.t2-side { --c: var(--ca); grid-row: 1; display: grid; justify-items: start; align-content: start; gap: 2px; min-width: 0; }
.t2-side.is-a { grid-column: 1; }
.t2-side.is-b { --c: var(--cb); grid-column: 3; justify-items: end; text-align: right; }
/* the avatar: --ph is the whole of it; the photo sits inside a ring that fills, clockwise from the top, with the share of
   the valid votes in the side's color, and wears a band ("Eleito") once the TSE says so */
.t2-av { position: relative; display: grid; place-items: center; width: var(--ph); height: var(--ph); margin-bottom: 8px; border-radius: 50%; }
.t2-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.t2-ring circle { fill: none; stroke-width: 8; }
.t2-ring-t { stroke: rgba(255, 255, 255, .12); }
.t2-ring-p { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s var(--ease-out); }
.t2-ring-p.is-zero { opacity: 0; }
.t2-av-in { position: relative; width: 76%; height: 76%; border-radius: 50%; overflow: hidden; background: var(--card-2); isolation: isolate; }
.t2-av-in .t2-ph { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
.t2-av-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0 8%; background: rgba(12, 31, 22, .78); color: #fff; font: 700 calc(var(--ph) * .14)/1.1 var(--f-sans); text-align: center; }
.t2-side.is-won .t2-av { box-shadow: 0 0 24px 2px color-mix(in srgb, var(--c) 45%, transparent); }
.t2-duel.is-compact .t2-av-tag { display: none; } /* too small to read: the verdict line says it */
@media (prefers-reduced-motion: reduce) { .t2-ring-p { transition: none; } }
.t2-nm { max-width: 100%; font: 600 clamp(14px, 4.8cqw, 17px)/1.25 var(--f-sans); letter-spacing: -.01em; text-wrap: balance; }
.t2-pt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.t2-pct { margin-top: 8px; font: 700 clamp(26px, 12cqw, 48px)/1 var(--f-sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t2-pct small { margin-left: 2px; font-size: .5em; font-weight: 600; letter-spacing: 0; vertical-align: .6em; color: var(--ink-2); }
.t2-votes, .t2-r1 { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t2-r1 { color: var(--muted); }
.t2-r1:empty, .t2-votes:empty { display: none; }
.t2-vs { grid-column: 2; grid-row: 1; align-self: start; position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin-top: calc(var(--ph) / 2 - 16px);
  border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font: 800 10px/1 var(--f-sans); letter-spacing: .08em; color: var(--ink-2); }
.t2-verdict { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font: 600 15px/1.2 var(--f-sans); text-align: center; }
.t2-verdict[hidden] { display: none; }
/* each side's share grows from its own end; a 2 px gap between; the 50% mark across */
.t2-bar { position: relative; display: flex; gap: 2px; height: 8px; }
.t2-fill { flex: 0 1 auto; min-width: 0; height: 100%; width: 0; transition: width 1.2s var(--ease-out); }
.t2-fill.is-a { background: var(--ca); border-radius: 4px 0 0 4px; }
.t2-fill.is-o { background: rgba(255, 255, 255, .14); }
.t2-fill.is-o[style*="width: 0%"] { display: none; }
.t2-fill.is-b { margin-left: auto; background: var(--cb); border-radius: 0 4px 4px 0; }
.t2-half { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; translate: -50% 0; border-radius: 1px; background: var(--ink); }
/* alive: a light runs along each side toward the middle, where they meet, and the 50% mark breathes (transform and
   opacity only, which the browser's compositor moves without redrawing) */
.t2-fill.is-a, .t2-fill.is-b { position: relative; overflow: hidden; }
.t2-fill.is-a::after, .t2-fill.is-b::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; min-width: 24px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); will-change: transform; }
.t2-fill.is-a::after { left: 0; animation: t2-run-a 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.t2-fill.is-b::after { right: 0; animation: t2-run-b 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes t2-run-a { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes t2-run-b { from { transform: translateX(100%); } to { transform: translateX(-260%); } }
.t2-half::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(246, 248, 241, .6), transparent); will-change: transform, opacity; animation: t2-half 3.2s ease-in-out infinite; }
@keyframes t2-half { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.5); } }
.t2-gap { margin: 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; text-wrap: balance; }
.t2-gap b { color: var(--ink); font-weight: 600; }
.t2-gap:empty { display: none; }
.t2-gv { white-space: nowrap; }
.t2-gv i { font-style: normal; }
/* the gap in one line: the points and the votes side by side (a little smaller in a narrow card) */
.t2-gap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 340px) { .t2-gap { font-size: 12px; } }
.t2-prog { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.t2-prog[hidden] { display: none; }
.t2-prog p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; color: var(--ink-2); }
.t2-prog .rp-pct { font: 700 20px/1 var(--f-sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.t2-prog .rp-sec { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.t2-prog .rp-sec:not(:empty)::after { content: ' seções'; }
.t2-prog .prog { height: 4px; border-radius: 2px; }
.t2-prog .prog i { background: var(--go); box-shadow: 0 0 12px color-mix(in srgb, var(--go) 55%, transparent); } /* the site's live green: no candidate's color */
.t2-stats { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px 12px; }
.t2-stats[hidden] { display: none; }
.t2-stats div { display: grid; gap: 4px; min-width: 0; }
.t2-stats div:nth-child(2) { text-align: center; }
.t2-stats div:nth-child(3) { text-align: right; }
.t2-stats dt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.t2-stats dd { margin: 0; font: 600 16px/1.1 var(--f-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 300px) { .t2-stats dt { font-size: 11px; } .t2-stats { gap: 8px; } }
/* the scoreboard to send (turno2.js): quiet, the width of the card; not on the full screen, nobody taps a TV */
.t2-placar { width: 100%; min-height: 44px; font-size: 15px; }
.is-tv .t2-placar { display: none; }
/* compact: inside "seu estado" and a state's sheet */
.t2-duel.is-compact { --ph: 48px; display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.t2-duel.is-compact .t2-dt { font-size: 16px; }
.t2-duel.is-compact .t2-dt span { font-size: 13px; }
.t2-duel.is-compact .t2-nm { font-size: 14px; }
.t2-duel.is-compact .t2-pct { margin-top: 4px; font-size: clamp(22px, 9cqw, 30px); }
.t2-duel.is-compact .t2-bar { height: 6px; }
.t2-duel.is-compact .t2-half { top: -3px; bottom: -3px; }
.t2-duel.is-compact .t2-vs { width: 28px; height: 28px; margin-top: calc(var(--ph) / 2 - 14px); font-size: 9px; }
.t2-duel.is-compact .t2-prog { padding-top: 12px; }
.t2-duel.is-compact .rp-pct { font-size: 16px; }
.t2-uf-body { display: grid; gap: 12px; }
.t2-uf-note { margin: 0; color: var(--muted); font-size: 14px; }
.t2-change { min-height: 36px; }
.t2-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font: 600 13px/1 var(--f-sans); }
.t2-legend li { display: inline-flex; align-items: center; gap: 8px; }
.t2-legend i { width: 12px; height: 12px; border-radius: 4px; }
.t2-legend.is-small { justify-content: flex-start; margin-top: 8px; }
.t2-sheet { display: grid; gap: 12px; }
.t2-tvbtn { display: none; }
@media (min-width: 1100px) { .t2-tvbtn { display: inline-flex; } }

/* ---------- ads: two places, always labeled; hidden while unsold. A brand with a line of text, or an image ---------- */
.ad { display: grid; gap: 8px; }
.ad[hidden] { display: none; }
.ad-tag { flex: none; font: 600 11px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ad-box { display: block; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--card); }
.ad-box img { display: block; width: 100%; height: auto; object-fit: cover; }
.ad-row { display: flex; align-items: center; gap: 8px 16px; min-width: 0; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--card) 86%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); color: var(--ink-2); font-size: 14px; line-height: 1.35; text-decoration: none; }
a.ad-row:hover .ad-cta { text-decoration: underline; }
.ad-logo { flex: none; width: auto; height: 28px; max-width: 120px; object-fit: contain; }
.ad-t { flex: 1; min-width: 0; text-wrap: pretty; }
.ad-t b { color: var(--ink); font-weight: 700; }
.ad-cta { flex: none; color: var(--blue-hi); font-weight: 600; white-space: nowrap; }
.ad.is-demo .ad-row, .ad.is-demo .ad-box { outline: 1px dashed var(--line-2); outline-offset: -1px; }
/* a free place: our own motion ad, words and a button only. A light runs across, the lines take turns, the button
   breathes (transform and opacity: nothing else is redrawn) */
.ad-row.is-free { appearance: none; position: relative; isolation: isolate; overflow: hidden; width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; touch-action: manipulation;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 12px 16px 12px 20px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, #0f4329 92%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-hi) 26%, transparent); transition: transform .2s var(--ease-out); }
.ad-row.is-free:active { transform: scale(.99); }
.ad-row.is-free::before { content: ''; position: absolute; z-index: -1; top: -50%; bottom: -50%; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 212, 0, .12), transparent);
  transform: translateX(-120%) skewX(-12deg); will-change: transform; animation: af-sweep 5.5s ease-in-out infinite; }
@keyframes af-sweep { 0%, 35% { transform: translateX(-120%) skewX(-12deg); } 75%, 100% { transform: translateX(330%) skewX(-12deg); } }
.af-text { min-width: 0; display: grid; gap: 2px; }
.af-text .ad-tag { font-size: 10px; }
.af-text b { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.2; }
.af-roll { position: relative; display: block; height: 18px; overflow: hidden; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.af-roll span { position: absolute; inset: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(100%); will-change: transform, opacity; animation: af-roll 12s ease-in-out infinite; }
.af-roll span:nth-child(2) { animation-delay: 3s; }
.af-roll b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } /* the true number, when there is one worth showing */
.af-roll span:nth-child(3) { animation-delay: 6s; }
.af-roll span:nth-child(4) { animation-delay: 9s; }
@keyframes af-roll { 0% { opacity: 0; transform: translateY(100%); } 4%, 22% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-100%); } }
.ad-row.is-free .ad-cta { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--blue-hi); color: #0a2414; font-size: 13px; font-weight: 700; white-space: nowrap; will-change: transform; animation: af-pulse 2.8s ease-in-out infinite; }
@keyframes af-pulse { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .af-roll span:first-child { opacity: 1; transform: none; } }
/* in the map's corner, the narrowest: just the arrow */
/* below the duel and in the map's box: in three lines, the line of the moment
   across the width (below the duel, the size of the 320×100 banner it stands for). A box too narrow for the button's
   word keeps just the arrow, so every line stays whole (a container query: it is the box's width that counts) */
.ad-lateral, .ad-padrao { container-type: inline-size; }
.ad-lateral .ad-row.is-free, .ad-padrao .ad-row.is-free { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag cta" "title cta" "roll roll"; align-content: center; justify-items: stretch; column-gap: 16px; row-gap: 2px; min-height: 96px; padding: 16px 16px 16px 20px; }
.ad-lateral .af-text, .ad-padrao .af-text { display: contents; }
.ad-lateral .af-text .ad-tag, .ad-padrao .af-text .ad-tag { grid-area: tag; align-self: end; line-height: 1.2; }
.ad-lateral .af-text b, .ad-padrao .af-text b { grid-area: title; align-self: start; font-size: 17px; }
.ad-lateral .af-roll, .ad-padrao .af-roll { grid-area: roll; }
.ad-lateral .ad-row.is-free .ad-cta, .ad-padrao .ad-row.is-free .ad-cta { grid-area: cta; }
@container (max-width: 289px) { .ad-row.is-free .ad-cta { width: 36px; padding: 0; justify-content: center; } .ad-row.is-free .af-cta-t { display: none; } }
/* a free place is an LED board, as around a football pitch: our ads and the invitation roll up in turns, every board of
   the page at once, a quick wave from the top one down to the map's (transform only; the hidden ones are out of reach) */
.af-slider { position: relative; display: grid; overflow: hidden; border-radius: 16px; touch-action: pan-y; }
.af-p { grid-area: 1 / 1; min-width: 0; display: grid; transform: translateY(100%); visibility: hidden; }
.af-p.is-on { transform: none; visibility: visible; transition: transform .6s var(--ease-io) var(--wave, 0s); }
.af-p.is-out { transform: translateY(-100%); visibility: hidden; transition: transform .6s var(--ease-io) var(--wave, 0s), visibility 0s linear calc(.6s + var(--wave, 0s)); }
#ad-lateral .af-slider { --wave: .12s; }
#ad-padrao .af-slider { --wave: .24s; }
/* the LED's own look: a fine grid of dots over the brand's colors */
.af-p .ad-row.is-free::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(0, 0, 0, .07) .6px, transparent 1px) 0 0 / 3px 3px; }
/* our own ad as an image: it fills the place, as tall as the invitation beside it (the image never sets the height) */
.af-img { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #0a2e1b; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-hi) 26%, transparent); }
.af-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.af-dots { position: absolute; z-index: 1; left: 50%; bottom: 6px; translate: -50% 0; display: flex; gap: 4px; pointer-events: none; }
.af-dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .3; transition: opacity .3s; }
.af-dots i.on { opacity: .9; }
.af-slider.is-lt .af-dots i { background: #0c1f16; } /* over a light board, dark dots */
.af-roll.is-still span { animation: none; opacity: 1; transform: none; } /* our message: one line, still */
/* our own ad, a brand card that stands out from the green page: the Urna de Treino's blue, or light (is-claro). Its
   button is just words and an arrow, still, as an advertiser's would be */
.ad-row.is-free.is-marca { background: radial-gradient(120% 160% at 100% 0%, rgba(110,160,255,.38), rgba(110,160,255,0) 55%), linear-gradient(135deg, #1846c8 0%, #0b2563 58%, #071a4a 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.ad-row.is-free.is-marca::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .1), transparent); }
.is-marca .ad-tag { color: rgba(255, 255, 255, .72); }
.is-marca .af-text b { display: flex; }
.is-marca .af-logo { display: block; width: auto; height: 22px; }
.ad-nobre .is-marca .af-logo { height: 20px; } /* above the map: one line of words high, as the invitation beside it */
.is-marca .af-roll span { color: rgba(255, 255, 255, .84); }
.is-marca .af-roll em { font-style: normal; font-weight: 700; color: #ffc629; }
.ad-row.is-free.is-marca .ad-cta { min-height: 0; padding: 0; border-radius: 0; background: none; color: #fff; font-size: 15px; animation: none; }
.ad-row.is-free.is-marca.is-claro { background: linear-gradient(135deg, #fbfcf7 0%, #eaf0e3 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ad-row.is-free.is-marca.is-claro::before { background: linear-gradient(100deg, transparent, rgba(24, 70, 200, .08), transparent); }
.is-claro .ad-tag { color: #5d6b61; }
.is-claro .af-roll span { color: #3a473e; }
.is-claro .af-roll em { color: #1846c8; }
.ad-row.is-free.is-marca.is-claro .ad-cta { color: #0b2563; }
/* a board made in the builder (/anunciar, public/placa.js): the brand's background, its accent in dots
   or a grid (fading out behind the words) and in a glow rising from below, its button */
.ad-row.is-free.is-marca.is-led { background: var(--led-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led-ink) 12%, transparent); }
.ad-row.is-free.is-marca.is-led.is-degrade { background: radial-gradient(90% 150% at 78% 175%, color-mix(in srgb, var(--led-acc) 95%, transparent) 0%, color-mix(in srgb, var(--led-acc) 50%, transparent) 38%, transparent 66%), var(--led-bg); }
.ad-row.is-free.is-marca.is-led::before { background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--led-acc) 35%, transparent), transparent); }
.af-p .ad-row.is-free.is-led.is-pontos::after { background: radial-gradient(circle, color-mix(in srgb, var(--led-acc) 55%, transparent) 1px, transparent 1.5px) 0 0 / 8px 8px; }
.af-p .ad-row.is-free.is-led.is-grade::after { background: linear-gradient(color-mix(in srgb, var(--led-acc) 30%, transparent) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, color-mix(in srgb, var(--led-acc) 30%, transparent) 1px, transparent 1px) 0 0 / 12px 12px; }
.af-p .ad-row.is-free.is-led.is-pontos::after, .af-p .ad-row.is-free.is-led.is-grade::after { opacity: .28; -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 75%); mask-image: linear-gradient(90deg, transparent 25%, #000 75%); }
/* a smooth board is smooth: not even the LED's fine dots */
.af-p .ad-row.is-free.is-led:not(.is-pontos):not(.is-grade)::after { display: none; }
.is-led .ad-tag { color: color-mix(in srgb, var(--led-ink) 62%, transparent); }
.is-led .af-roll span { color: color-mix(in srgb, var(--led-ink) 86%, transparent); }
.is-led .af-roll em { color: var(--led-ink); }
.is-led .af-nome { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--led-ink); }
.ad-row.is-free.is-marca.is-led .ad-cta { min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--led-btn); color: var(--led-btn-ink); font-size: 13px; }
/* above the map on a phone, a board's button keeps just the arrow, so the line stays whole */
.ad-nobre { container-type: inline-size; }
@container (max-width: 420px) { .ad-nobre .ad-row.is-free.is-marca.is-led .ad-cta { width: 36px; min-height: 36px; padding: 0; justify-content: center; } .ad-nobre .is-led .af-cta-t { display: none; } }
@media (prefers-reduced-motion: reduce) { .af-p.is-on, .af-p.is-out { transition: none; } }
/* ours, the invitation: the Fato Público's yellow, as its mark */
.ad-row.is-free.is-anuncie { background: linear-gradient(135deg, #ffe45c 0%, #ffd400 55%, #f2c200 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ad-row.is-free.is-anuncie::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); }
.is-anuncie .ad-tag { color: rgba(31, 26, 0, .68); }
.is-anuncie .af-text b { color: #141100; }
.is-anuncie .af-roll { color: #3a3200; }
.is-anuncie .af-roll b { color: #141100; }
.ad-row.is-free.is-anuncie .ad-cta { background: #0c1f16; color: #ffd400; }

/* where each place is, in the form: a tiny drawing of the page, the chosen place lit */
.an-where { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.an-where svg { display: block; width: 120px; height: auto; }
.an-where svg rect { fill: rgba(246, 248, 241, .08); }
.an-where svg .w-map { fill: rgba(246, 248, 241, .05); }
.an-where svg .w-br { fill: rgba(246, 248, 241, .16); }
.an-where svg [data-k] { fill: rgba(246, 248, 241, .14); transition: fill .3s ease; }
.an-where svg[data-s="nobre"] [data-k="nobre"], .an-where svg[data-s="tv"] [data-k="nobre"], .an-where svg[data-s="lateral"] [data-k="lateral"], .an-where svg[data-s="padrao"] [data-k="padrao"] { fill: var(--blue-hi); animation: an-lit 1.6s ease-in-out infinite; }
@keyframes an-lit { 50% { opacity: .55; } }
.an-where figcaption { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.an-where figcaption b { color: var(--ink); }
/* the form */
.t2-page .dlg-head h2 { font-size: 22px; letter-spacing: -.02em; }
.t2-page .dlg-head p { font-size: 14px; }
.an-body { display: grid; gap: 12px; }
.an-f { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.an-f input { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--ink); font: 500 16px/1 var(--f-sans); }
.an-f input:focus { outline: none; border-color: var(--blue-hi); }
/* the number's country beside it: a flag and its code, the full list from the system's own picker */
.an-esp { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.an-esp legend { margin-bottom: 4px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.an-esp label { position: relative; }
.an-esp input { position: absolute; opacity: 0; }
.an-esp span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.an-esp input:checked + span { color: #0a2414; background: var(--blue-hi); box-shadow: none; }
.an-esp input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.an-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.an-err { margin: 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--fix) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fix) 60%, transparent); color: var(--ink); font: 600 15px/1.45 var(--f-sans); }
.an-err:focus { outline: none; }
/* an ad the check refused (/anunciar): impossible to miss, in the warning orange (no candidate's color), the reason and the way out */
.an-err.is-no { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--fix) 20%, var(--card)); box-shadow: inset 0 0 0 2px var(--fix), 0 8px 32px color-mix(in srgb, var(--fix) 25%, transparent); font-weight: 400; animation: anb-no .45s var(--ease-out); }
.anb-no-t { display: flex; align-items: center; gap: 8px; font: 700 19px/1.25 var(--f-sans); letter-spacing: -.01em; color: var(--ink); }
.anb-no-t svg { width: 24px; height: 24px; flex: none; color: var(--fix); }
.an-err.is-no p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.an-err.is-no .anb-no-h { font-size: 14px; color: var(--ink-2); }
.an-err.is-no a { color: var(--ink); text-underline-offset: 2px; }
@keyframes anb-no { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .an-err.is-no { animation: none; } }
.an-go, .an-wa { width: 100%; justify-content: center; }
/* the way to advertise, in the brand's yellow (like the place it lights) */
.btn.is-sun { --top: #ffe34d; --bot: #ffc800; --edge: #7a5a00; --lip: rgba(255, 255, 255, .6); --ring: #ffd400; color: #241c00; }
.an-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); text-align: center; }
.an-ok { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.an-ok b { color: var(--ink); }
.foot-link { appearance: none; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; cursor: pointer; }
/* the premium banner, right above the map: 728×90 (970×90 on a wide screen), the market's standard top banner; on a
   phone, 320×50 or 320×100 (img_m), at the top, under the title */
.ad-nobre .ad-box { max-width: 970px; margin-inline: auto; border-radius: 12px; }
.ad-nobre .ad-box img { aspect-ratio: auto; height: auto; }
@media (max-width: 760px) { .ad-nobre .ad-row { flex-wrap: wrap; } .ad-nobre .ad-t { flex-basis: 100%; order: 2; } .ad-nobre .ad-cta { margin-left: auto; } }
/* the map's box: over the ocean on a computer, a card under the map elsewhere */
.ad-padrao .ad-row { display: grid; justify-items: start; gap: 8px; }
/* the banner under the duel: 320×100 (IAB's large mobile banner, the one every advertiser already has), or a brand
   with a line of text, about as tall */
.ad-lateral .ad-row { display: grid; justify-items: start; align-content: center; gap: 8px; min-height: 100px; padding: 16px 20px; }
.ad-lateral .ad-t { font-size: 14px; }
.ad-lateral .ad-t b { font-size: 15px; }
.ad-lateral .ad-box img { aspect-ratio: 16 / 5; }
.ad-padrao .ad-box img { aspect-ratio: 2 / 1; }
@media (min-width: 1100px) {
  .t2-mapbox .ad-padrao { position: absolute; right: 0; bottom: 0; width: min(300px, 40%); }
}

/* ---------- 2º turno as a dashboard: duel, map, regions and feed side by side on a computer; stacked on a phone ---------- */
.t2-dash { display: flex; flex-direction: column; gap: 16px; }
.t2-col { display: contents; }
/* on a phone, one column in reading order: the duel, the map, the regions, your state, the governors, the curve, the feed */
/* (the rectangle comes after the regions, so two ads never sit one right after the other) */
@media (max-width: 1099px) { #ad-nobre { order: 0; } #t2-br { order: 1; } #t2-map-card { order: 2; } #a-sum { order: 3; } #a-sum2 { order: 3; } #t2-feed { order: 3; } #a-list { order: 4; } #t2-reg { order: 4; } #ad-lateral { order: 5; } #t2-uf { order: 6; } #t2-gov { order: 7; } #t2-curve { order: 8; } }
/* a tablet: the cards on the left, the map beside them, staying in view */
@media (min-width: 820px) and (max-width: 1099px) {
  .t2-dash.wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-auto-flow: row dense; align-items: start; }
  .t2-dash > .t2-col > * { grid-column: 1; }
  /* the banner and the map, one column of their own beside the cards, staying in view */
  .t2-col.is-mid { display: grid; gap: 16px; min-width: 0; grid-column: 2; grid-row: 1 / span 30; align-self: start; position: sticky; top: 80px; }
  /* the banner on the left stays right under the duel, as on a computer (on a phone it waits for the regions) */
  .t2-dash #a-sum, .t2-dash #t2-br, .t2-dash #ad-lateral { order: 1; }
}
/* the map is never taller than the window has room for: with its chips and timeline the card stays whole on screen
   (--maph: the window's height less everything else in the map's column, measured by fitMap in turno2.js) */
@media (min-width: 820px) {
  .t2-page:not(.is-tv) .t2-geo svg { width: 100%; max-height: var(--maph, calc(100vh - 420px)); } /* as wide as the card: the window follows (turno2.js) */
}
@media (min-width: 1100px) {
  .t2-top-in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: start; text-align: left; }
  .t2-top-r { justify-items: end; text-align: right; }
  /* the sides grow a little on a big screen; the map takes the rest */
  .t2-dash.wrap { display: grid; grid-template-columns: minmax(0, clamp(296px, 19vw, 400px)) minmax(0, 1fr) minmax(0, clamp(264px, 17vw, 360px)); align-items: start; }
  .t2-col { display: grid; gap: 16px; min-width: 0; }
  .t2-page:not(.is-tv) #t2-map-rule { display: none; } /* the pointer finds the numbers by itself: the map gets the line */
  /* the page's top and the map's card a little tighter: every pixel saved goes to the map */
  .t2-page:not(.is-tv) .t2-top { padding-top: calc(72px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
  .t2-page:not(.is-tv) .t2-sec { padding-top: 8px; }
  .t2-page:not(.is-tv) .t2-map-card { gap: 8px; }
  .t2-page:not(.is-tv) .t2-chip-uf { min-height: 36px; }
  /* the map's column scrolls with the page until its foot (the timeline) shows, then stays: --midh is its height (JS) */
  .t2-col.is-mid { position: sticky; top: min(80px, calc(100vh - var(--midh, 0px) - 16px)); }
  .t2-feed { max-height: 520px; overflow: auto; overscroll-behavior: contain; }
}

/* the map's header: where you are (Brazil or a state), the search, the layers */
.t2-mh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.t2-mt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.t2-mt-t { min-width: 0; }
.t2-mt-t h2 { margin: 0; font: 700 clamp(22px, 2.2vw, 26px)/1.1 var(--f-sans); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2-mt-t p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.t2-back { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: var(--card-2); color: var(--ink); font: 600 13px/1 var(--f-sans); cursor: pointer; touch-action: manipulation; }
.t2-back svg { width: 16px; height: 16px; }
.t2-search { position: relative; flex: 1 1 200px; max-width: 280px; }
.t2-search > svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.t2-search input { width: 100%; height: 40px; padding: 0 12px 0 36px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--ink); font: 500 15px/1 var(--f-sans); -webkit-appearance: none; appearance: none; }
.t2-search input::placeholder { color: var(--muted); }
.t2-search input:focus { outline: none; border-color: var(--blue-hi); }
.t2-search input::-webkit-search-cancel-button { display: none; }
.t2-qr { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7); }
.t2-qr button { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: 500 14px/1.2 var(--f-sans); text-align: left; cursor: pointer; }
.t2-qr b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.t2-qr span { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.t2-qr [aria-selected="true"] button, .t2-qr button:hover { background: rgba(255, 255, 255, .07); }
.t2-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.t2-tools:not(:has(.seg:not([hidden]), .t2-search:not([hidden]))) { display: none; }
/* a computer: the header in one line (the place and what the map shows, the buttons, the search as a magnifier that
   opens over the buttons while in use) */
@media (min-width: 820px) {
  .t2-mt-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
  .t2-mt-t p { margin: 0; }
  .t2-tools { position: relative; }
  .t2-search { flex: none; width: 40px; max-width: none; }
  .t2-search input { padding-right: 0; cursor: pointer; }
  .t2-search input::placeholder { color: transparent; }
  .t2-search.is-open { position: absolute; right: 0; top: 50%; translate: 0 -50%; z-index: 5; width: 280px; }
  .t2-search.is-open input { padding-right: 12px; cursor: text; }
  .t2-search.is-open input::placeholder { color: var(--muted); }
}
.t2-seg button { min-height: 32px; padding: 0 12px; font-size: 13px; }
/* the key: who leads where, then what the shades mean */
.t2-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.k-who { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 500 13px/1.3 var(--f-sans); color: var(--ink-2); }
.k-who li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.k-who i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.k-who b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.k-who span { color: var(--muted); }
.k-who .k-tie { background: var(--tie); }
.k-ramp { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.k-ramp.is-pst i { width: 96px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in oklab, var(--ink) 12%, var(--card-2)), var(--ink)); }

/* the map: the states (IBGE), or every municipality with the state borders over them */
.t2-mapbox { position: relative; }
.t2-geo { position: relative; overflow: hidden; touch-action: pan-y; transition: opacity .28s ease; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.t2-geo.is-zoomed { touch-action: none; cursor: grab; } /* zoomed in, one finger moves the map instead of the page */
.t2-geo.is-zoomed:active { cursor: grabbing; }
/* + and −, in the corner the map leaves empty */
.t2-zoom { position: absolute; left: 0; bottom: 0; display: grid; gap: 4px; }
.t2-zoom button { appearance: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: rgba(var(--glass), .85); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); cursor: pointer; touch-action: manipulation; transition: opacity .2s, transform .2s var(--ease-out); }
.t2-zoom button:active { transform: scale(.94); }
.t2-zoom button:disabled { opacity: .35; cursor: default; }
.t2-zoom svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .t2-zoom button { width: 40px; height: 40px; } }
.t2-geo svg { display: block; width: 100%; height: auto; }
.t2-geo .g-ufs path { fill: var(--f, var(--card-2)); stroke: var(--card); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill .6s ease, opacity .3s ease; }
@media (hover: hover) { .t2-geo .g-ufs path:hover { stroke: var(--ink); stroke-width: 2; } }
.t2-geo svg.is-mun .g-ufs, .t2-geo svg:not(.is-mun) .g-mun { display: none; }
.t2-geo .g-mun [data-i] { fill: var(--card-2); cursor: pointer; transition: fill .6s ease; }
.t2-geo .g-mun g { transition: opacity .3s ease; }
.t2-geo .g-mb { fill: none; stroke: var(--card); stroke-width: .5; stroke-opacity: .7; vector-effect: non-scaling-stroke; pointer-events: none; }
.t2-geo .g-sb { fill: none; stroke: var(--ink); stroke-width: 1; stroke-opacity: .5; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.t2-geo .g-hl { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.t2-geo svg.is-anim .g-mb, .t2-geo svg.is-anim .g-caps { display: none; }
.t2-geo svg.is-anim { will-change: transform; }
.t2-geo.is-swap { opacity: .12; }
/* the layer over the map: the outline of the state in focus, and the rings where votes arrive */
.t2-over { position: absolute; left: 0; top: 0; pointer-events: none; transition: opacity .2s; }
.t2-over.is-off { opacity: 0; transition: none; } /* while the map moves */
.t2-geo .t2-over svg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; overflow: visible; }
.g-spot { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.g-spot.is-on { animation: t2-spot 1.4s cubic-bezier(.65, 0, .35, 1) forwards; }
.t2-over svg.is-on { filter: drop-shadow(0 0 6px rgba(246, 248, 241, .55)); animation: t2-breathe 2.6s ease-in-out 1.4s infinite; }
@keyframes t2-spot { to { stroke-dashoffset: 0; } }
@keyframes t2-breathe { 50% { opacity: .45; } }
.tv-ping { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; animation: tv-ping 1.8s var(--ease-out) both; }
@keyframes tv-ping { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(3.4); } }
.t2-geo .g-t, .t2-geo .g-caps text { transform: translate(var(--x), var(--y)) scale(var(--k, 1)); transform-origin: 0 0; transform-box: view-box; } /* set in screen pixels, shrunk to the map (turno2.js fitLabels) */
.t2-geo .g-t { pointer-events: none; }
.t2-geo .g-t text { font: 700 var(--fs, 11px)/1 var(--f-sans); fill: var(--ink); paint-order: stroke; stroke: rgba(0, 0, 0, .5); stroke-width: calc(var(--fs, 11px) * .25); stroke-linejoin: round; }
/* the count's map: each state's label on a badge, legible on any shade; a state done gets the green check */
.t2-geo .g-b { display: none; fill: rgba(var(--glass), .9); stroke: rgba(255, 255, 255, .16); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.t2-geo svg.is-pst .g-b { display: block; }
.t2-geo svg.is-pst .g-t text { stroke: none; }
.t2-geo svg.is-pst .g-t.is-done .g-b { stroke: var(--go); }
.t2-geo svg.is-pst .g-t.is-done .g-tp { fill: var(--go); }
.t2-geo .g-tp { font-weight: 600; font-size: calc(var(--fs, 11px) * .9); fill: var(--ink-2); }
/* zoomed into a state: it stays, the rest of the country fades, its capital is named */
.t2-geo .is-zoom .g-mun g:not(.on), .t2-geo .is-zoom .g-ufs path:not(.on) { opacity: .25; }
.t2-geo .is-zoom .g-labs { display: none; }
.t2-geo .g-caps g { display: none; }
.t2-geo .is-zoom .g-caps g.on { display: block; }
.t2-geo .g-caps circle { fill: var(--ink); stroke: rgba(0, 0, 0, .5); stroke-width: .3; }
.t2-geo .g-caps text { font: 600 var(--fs, 11px)/1 var(--f-sans); fill: var(--ink); pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: calc(var(--fs, 11px) * .28); stroke-linejoin: round; }
/* the zoomed state's own numbers, under the map */
.t2-zbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.t2-zbar[hidden] { display: none; }
.tz-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; font-size: 14px; color: var(--ink-2); }
.tz-v span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tz-v i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tz-v b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tz-v small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.t2-zbar .cap { min-height: 36px; }
.t2-strip { display: flex; align-items: center; gap: 4px; min-width: 0; }
.t2-chips { flex: 1; min-width: 0; display: flex; gap: 8px; padding: 4px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 12px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.t2-chips::-webkit-scrollbar { display: none; }
.t2-arrow { appearance: none; flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); cursor: pointer; touch-action: manipulation; transition: opacity .2s; }
.t2-arrow svg { width: 16px; height: 16px; }
.t2-arrow.is-r svg { transform: scaleX(-1); }
.t2-arrow:disabled { opacity: .3; cursor: default; }
.t2-chip-uf { flex: none; scroll-snap-align: start; appearance: none; min-width: 52px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--f, var(--card-2)); color: var(--ink); font: 700 13px/1 var(--f-sans); cursor: pointer; touch-action: manipulation; transition: background-color .6s ease, transform .2s var(--ease-out); }
.t2-chip-uf:active { transform: scale(.95); }
.t2-chip-uf.is-cur { box-shadow: 0 0 0 2px var(--ink); }
.t2-chip-uf small { margin-left: 4px; font-size: 12px; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .t2-search { flex-basis: 100%; max-width: none; }
  .t2-search input { height: 44px; font-size: 16px; } /* 16 px: iOS doesn't zoom into the field */
  .t2-tools .seg { flex: 1 1 auto; }
  .t2-tools .seg button { flex: 1; }
}

/* the card: hovering the map on a computer, and the municipality's bottom sheet on a phone */
.t2-tip { position: fixed; left: 0; top: 0; z-index: 90; width: 296px; max-width: calc(100vw - 16px); display: grid; gap: 12px; padding: 16px; border-radius: 16px; pointer-events: none;
  background: color-mix(in srgb, var(--card-2) 88%, #000); border: 1px solid var(--line-2); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .8); }
.t2-tip[hidden] { display: none; }
.tc-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tc-b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--c, var(--line-2)); color: #fff; font: 700 12px/1 var(--f-sans); letter-spacing: .02em; }
.tc-t { display: grid; gap: 2px; min-width: 0; }
.tc-t b { font: 700 16px/1.2 var(--f-sans); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-t small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tc-c { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tc-c li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.tc-ph { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--card); box-shadow: 0 0 0 2px var(--c); }
.tc-n { display: grid; min-width: 0; }
.tc-n b { font: 600 14px/1.25 var(--f-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-n small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tc-p { font: 700 18px/1 var(--f-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-c li.is-lead .tc-p { color: var(--ink); }
.tc-y { margin: 0; padding-top: 12px; border-top: 1px solid var(--line-2); display: grid; gap: 4px; font-size: 12px; line-height: 1.35; }
.tc-y div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tc-y dt { color: var(--muted); white-space: nowrap; }
.tc-y dd { margin: 0; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.t2-mun-head { align-items: center; padding-bottom: 12px; }
.t2-mun-head .tc-b { width: 40px; height: 40px; font-size: 13px; border-radius: 12px; }
.t2-mun-head .tc-t b { font-size: 20px; white-space: normal; text-wrap: balance; }
.t2-mun-body { display: grid; gap: 16px; }
.t2-mun-body .tc-c { gap: 12px; }
.t2-mun-body .tc-ph { width: 40px; height: 40px; }
.t2-mun-body .tc-n b { font-size: 16px; }
.t2-mun-body .tc-p { font-size: 24px; }
.t2-mun-body .tc-y { font-size: 13px; }
.t2-share { width: 100%; }
.tip span { display: block; font-size: 13px; }
.tip small { display: block; margin-top: 4px; font-size: 12px; color: #555; }
/* the timeline: a capsule with the moment shown, the evening on a ruled track (the hours under it, a ring where the
   lead changed hands) and "Ao vivo" */
.t2-time { --p: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 12px 12px 8px 16px; border-radius: 12px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--line); }
.t2-time[hidden] { display: none; }
.tt-now { margin: 0 0 8px; display: grid; gap: 4px; min-width: 52px; }
.tt-now b { font: 700 17px/1 var(--f-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tt-now small { font-size: 11px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-track { position: relative; min-width: 0; padding-bottom: 16px; }
.tt-track input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: none; cursor: pointer; touch-action: pan-y; }
.tt-track input[type="range"]:focus-visible { outline: none; }
.tt-track input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(246, 248, 241, .6) 0 2px, transparent 2px 6px) 0 0 / var(--p) 100% no-repeat, repeating-linear-gradient(90deg, rgba(246, 248, 241, .16) 0 2px, transparent 2px 6px), rgba(255, 255, 255, .04); }
.tt-track input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(246, 248, 241, .6) 0 2px, transparent 2px 6px) 0 0 / var(--p) 100% no-repeat, repeating-linear-gradient(90deg, rgba(246, 248, 241, .16) 0 2px, transparent 2px 6px), rgba(255, 255, 255, .04); }
.tt-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.tt-track input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.tt-track input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus); }
.tt-track input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus); }
.tt-hours, .tt-marks { position: absolute; left: 10px; right: 10px; pointer-events: none; }
.tt-hours { bottom: 0; height: 12px; }
.tt-hours span { position: absolute; left: calc(var(--x) * 100%); translate: -50% 0; font-size: 11px; line-height: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-marks { top: 12px; height: 0; }
.tt-marks i { position: absolute; left: calc(var(--x) * 100%); top: -6px; width: 12px; height: 12px; translate: -50% 0; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); }
.tt-live { appearance: none; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 13px/1 var(--f-sans); white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.tt-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--go); }
.tt-live:disabled { cursor: default; }
.tt-live:not(.is-back) i { animation: t-live 1.8s var(--ease-out) infinite; }
.tt-live.is-back { background: var(--card-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.tt-live.is-back i, .t2-time.is-final .tt-live i { background: var(--muted); animation: none; }
/* on a phone, the dial: a ruler (a tick every 5 minutes, the hours marked) that slides under a fixed needle */
.tt-dialbox { display: none; }
@media (max-width: 760px) {
  .t2-time .tt-track { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* still there for screen readers */
  .tt-dialbox { position: relative; grid-column: 1 / -1; grid-row: 2; display: block; height: 56px; margin: 0 -12px -8px; }
  .tt-dial { height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
  .tt-dial::-webkit-scrollbar { display: none; }
  .tt-rail { display: flex; width: max-content; height: 100%; }
  .tt-sp { flex: none; }
  .tt-ruler { position: relative; flex: none; height: 100%; background: repeating-linear-gradient(90deg, rgba(246, 248, 241, .3) 0 1px, transparent 1px 20px) 0 10px / 100% 12px no-repeat; }
  .d-h { position: absolute; top: 0; translate: 6px 0; padding-top: 28px; font-size: 11px; font-weight: 600; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; } /* beside its tick: the needle never covers it */
  .d-h::before { content: ''; position: absolute; left: -6px; top: 6px; width: 2px; height: 20px; translate: -50% 0; border-radius: 1px; background: rgba(246, 248, 241, .65); }
  .d-r { position: absolute; bottom: 4px; width: 4px; height: 4px; translate: -50% 0; border-radius: 50%; background: var(--ink-2); opacity: .6; }
  .d-ring { position: absolute; top: 10px; width: 12px; height: 12px; translate: -50% 0; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); }
  .tt-needle { position: absolute; left: 50%; top: 4px; bottom: 8px; width: 2px; translate: -50% 0; border-radius: 1px; background: var(--ink); box-shadow: 0 0 8px rgba(246, 248, 241, .6); pointer-events: none; }
  .tt-needle::before { content: ''; position: absolute; left: 50%; top: -4px; translate: -50% 0; border: 5px solid transparent; border-top-color: var(--ink); }
  .t2-time.is-wait .tt-ruler { opacity: .7; }
}
/* before the count: the evening ahead, and the countdown where "Ao vivo" will be */
.t2-time.is-wait .tt-track input[type="range"] { cursor: default; opacity: .6; }
.t2-time.is-wait .tt-track input[type="range"]::-webkit-slider-thumb { opacity: 0; }
.t2-time.is-wait .tt-track input[type="range"]::-moz-range-thumb { opacity: 0; }
.t2-time.is-wait .tt-live i { background: var(--sun); animation: none; }
.t2-time.is-wait .tt-live { color: var(--ink-2); }
@media (max-width: 560px) {
  .t2-time { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 12px 8px; }
  .tt-track { grid-column: 1 / -1; grid-row: 2; }
  .tt-now { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; margin: 0; }
  .tt-live { margin: 0; }
}
/* regions and governors: one row each */
.t2-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.t2-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.t2-rows li:first-child { border-top: 0; }
.t2-rows li.is-btn { display: block; }
.r-who { display: grid; gap: 4px; min-width: 0; }
.r-who b { font: 600 14px/1.2 var(--f-sans); white-space: nowrap; }
.r-who span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-who span:empty { display: none; }
.r-lead { display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.r-lead i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.r-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.r-lead.is-two { display: grid; justify-items: end; gap: 4px; }
.r-top { display: inline-flex; align-items: center; gap: 8px; }
.r-lead.is-two .r-nm { max-width: 100%; font-size: 12px; color: var(--muted); }
.r-lead.is-two .c-st { margin: 0; }
.r-ph { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--card-2); box-shadow: 0 0 0 1.5px var(--c); }
.r-lead .r-nm { font-size: 12px; font-weight: 600; color: var(--muted); }
.r-lead .r-nm.is-name { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.r-lead b { color: var(--ink); font-variant-numeric: tabular-nums; }
.r-lead .c-st { margin-left: 4px; }
.r-dv { min-width: 32px; text-align: right; font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.r-bar { grid-column: 1 / -1; display: flex; gap: 2px; height: 4px; border-radius: 2px; overflow: hidden; }
.r-bar i { height: 100%; }
.r-bar i:last-child { flex: 1; }
.t2-row { appearance: none; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
/* the curve (turno2.js renderCurve): drawn in the card's own pixels */
.cv-box { position: relative; }
.t2-curve-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.cv .cv-g { stroke: rgba(255, 255, 255, .06); }
.cv .cv-50 { stroke: var(--line-2); stroke-dasharray: 4 4; }
.cv .cv-ax { font: 500 11px/1 var(--f-sans); fill: var(--muted); font-variant-numeric: tabular-nums; }
.cv .cv-wait { font: 600 14px/1 var(--f-sans); fill: var(--ink-2); }
.cv .cv-l { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cv .cv-now { stroke: var(--ink); stroke-width: 1; opacity: .35; }
.cv .cv-nt { font: 600 11px/1 var(--f-sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.cv-end { transition: transform .9s var(--ease-out); }
.cv-dot { fill: var(--c); stroke: var(--card); stroke-width: 2; }
.cv-pulse { fill: var(--c); opacity: 0; transform-box: fill-box; transform-origin: center; }
.cv-end.is-live .cv-pulse { animation: cv-pulse 2s var(--ease-out) infinite; }
@keyframes cv-pulse { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.cv-v { font: 700 13px/1 var(--f-sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.cv-end.is-lead .cv-v { fill: var(--ink); }
.cv-hl { stroke: var(--ink); stroke-width: 1; opacity: .5; }
.cv-hd { stroke: var(--card); stroke-width: 2; }
.cv-tip { position: absolute; left: 0; top: 0; display: grid; gap: 4px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--card-2) 92%, #000); border: 1px solid var(--line-2); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .8); font-size: 12px; color: var(--ink-2); white-space: nowrap; pointer-events: none; }
.cv-tip > b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cv-tip span { display: inline-flex; align-items: center; gap: 6px; }
.cv-tip span b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cv-tip i { width: 8px; height: 8px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .cv-end { transition: none; } .cv-end.is-live .cv-pulse { animation: none; } }
/* the full screen: read from across the room */
.is-tv .cv .cv-ax, .is-tv .cv .cv-nt { font-size: 14px; }
.is-tv .cv-v { font-size: 18px; }
.is-tv .cv .cv-l { stroke-width: 3.5; }
/* before the count: the curve's frame, waiting */
.t2-curve-plot .c-base { stroke: var(--line-2); }
.t2-curve-plot .c-wait { font: 600 12px/1 var(--f-sans); fill: var(--ink-2); }
/* the feed: a ring for each release, a photo when someone takes the lead or wins, the state when it finishes */
.t2-feed { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.t2-feed li { display: grid; grid-template-columns: 36px 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.t2-feed li:first-child { border-top: 0; }
.t2-feed time { font: 600 11px/1 var(--f-sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.f-ic { display: grid; place-items: center; width: 28px; height: 28px; }
.f-ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-2); }
.f-ring.is-wait { border-color: var(--sun); }
.f-pair { display: flex; }
.f-pair .f-ph { width: 18px; height: 18px; box-shadow: 0 0 0 1.5px var(--c); }
.f-pair .f-ph + .f-ph { margin-left: -8px; }
.f-ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--card-2); box-shadow: 0 0 0 2px var(--c, var(--line-2)); }
.f-uf { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 700 11px/1 var(--f-sans); }
.f-tx { display: grid; gap: 2px; min-width: 0; text-wrap: pretty; }
.f-tx b { color: var(--ink); font-weight: 600; }
.f-tx small { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.f-tx small i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
.f-tx small b { color: var(--ink-2); font-weight: 600; }
.t2-feed li.is-hl { color: var(--ink); }
.t2-feed li.is-hl .f-tx > span { font-size: 14px; }
.t2-feed li.t2-empty { display: block; }
.t2-feed .f-tx > span > b:first-child { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.t2-more { appearance: none; justify-self: start; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 13px/1 var(--f-sans); cursor: pointer; touch-action: manipulation; }
/* the floating caption: something just happened (only transform and opacity move) */
.t2-gc { position: fixed; z-index: 70; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: min(440px, calc(100vw - 48px)); display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; cursor: pointer;
  background: rgba(var(--glass), .94); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 48px -16px rgba(0, 0, 0, .8); transform: translateY(16px); opacity: 0; transition: transform .5s var(--spring), opacity .3s ease; }
.t2-gc[hidden] { display: none; }
.t2-gc.is-on { transform: none; opacity: 1; }
.t2-gc .gc-now { align-self: stretch; display: grid; place-items: center; padding: 0 8px; border-radius: 8px; background: var(--blue-hi); color: #0a2414; font: 800 11px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; }
.t2-gc .f-tx > span { font-size: 15px; color: var(--ink); }
/* the caption (and the page's toasts) drop from under the menu, on every screen: never over an ad */
.t2-gc { left: 50%; top: calc(80px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -16px); }
.t2-gc.is-on { transform: translate(-50%, 0); }
.t2-page .toast { top: calc(80px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -20px); }
.t2-page .toast.is-on { transform: translate(-50%, 0); }
@media (max-width: 1099px) {
  .t2-gc, .t2-page .toast { top: calc(124px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 760px) {
  .t2-gc { left: 16px; right: 16px; top: calc(116px + env(safe-area-inset-top, 0px)); max-width: none; transform: translateY(-16px); }
  .t2-gc.is-on { transform: none; }
  .t2-page .toast { top: calc(116px + env(safe-area-inset-top, 0px)); }
}
.t2-empty { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* ---------- full screen, like a news broadcast ---------- */
.tv-bar, .tv-foot { display: none; }
.is-tv { overflow: hidden; }
.is-tv .lnav, .is-tv .t2-top, .is-tv .foot, .is-tv .apu-src, .is-tv .t2-col.is-right, .is-tv #t2-uf, .is-tv .t2-search, .is-tv .t2-tools,
.is-tv .t2-time, .is-tv .race-rule, .is-tv .t2-zbar, .is-tv .t2-zoom, .is-tv .ad-padrao, .is-tv .t2-back { display: none !important; }
.is-tv .t2-sec { padding: 0; }
.is-tv .t2-dash.wrap { position: fixed; z-index: 1; top: 72px; bottom: 228px; left: 24px; right: 24px; width: auto; max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 30vw) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 16px; }
.is-tv .t2-col { min-height: 0; height: 100%; }
.is-tv .t2-col.is-left, .is-tv .t2-col.is-mid { position: static; display: flex; flex-direction: column; gap: 12px; }
.is-tv #t2-curve { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.is-tv #t2-map-card { flex: 1; min-height: 0; }
.is-tv .t2-curve-plot { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.is-tv #t2-curve { min-height: 0; overflow: hidden; }
.is-tv .t2-curve-plot { min-height: 0; }
.is-tv .t2-curve-plot svg { width: 100%; height: 100%; min-height: 0; }
.is-tv .cv-box { min-height: 0; height: 100%; }
.is-tv .t2-map-card { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.is-tv .t2-mapbox, .is-tv .t2-geo { min-height: 0; height: 100%; }
.is-tv .t2-geo svg { width: 100%; height: 100%; } /* the whole card: the country in its middle, a state zoomed into from side to side */
.is-tv .t2-duel { --ph: 88px; }
.is-tv .t2-duel .t2-pct { font-size: clamp(32px, 14cqw, 72px); }
.is-tv .t2-duel .t2-nm { font-size: clamp(16px, 5cqw, 22px); }
/* the bar on top */
.is-tv .tv-bar { position: fixed; z-index: 20; top: 16px; left: 24px; right: 24px; height: 44px; display: flex; align-items: center; gap: 16px; padding: 0 8px 0 0; border-radius: 12px; overflow: hidden; background: rgba(var(--glass), .9); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; color: var(--ink-2); }
.tv-live { align-self: stretch; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--card-2); color: var(--ink); font: 800 13px/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tv-live.is-live { background: var(--go); color: #03240f; }
.tv-live.is-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: t-live 1.8s var(--ease-out) infinite; }
.tv-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; white-space: nowrap; }
.tv-brand .fp-mark { width: 24px; height: 24px; border-radius: 6px; }
.tv-brand .fp-mark svg { width: 16px; height: 16px; }
.tv-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-what b { color: var(--ink); }
.tv-prog { flex: 1; min-width: 80px; height: 6px; border-radius: 3px; }
.tv-prog i { background: var(--go); box-shadow: 0 0 10px color-mix(in srgb, var(--go) 55%, transparent); }
.tv-spon { white-space: nowrap; font-size: 13px; color: var(--muted); }
.tv-spon b { color: var(--ink); }
.tv-clock { font: 700 17px/1 var(--f-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.tv-x { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 8px; background: var(--card-2); color: var(--ink); font: 600 14px/1 var(--f-sans); white-space: nowrap; cursor: pointer; }
.tv-x svg { width: 14px; height: 14px; }
@media (max-width: 1279px) { .tv-x-l { display: none; } } /* a narrower screen: just "Sair" */
/* which screen: a button on the bar, and its menu under it (the presentation, or one screen to stay on) */
.tv-pick { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 12px; border: 0; border-radius: 8px; background: var(--card-2); color: var(--ink); font: 600 14px/1 var(--f-sans); white-space: nowrap; cursor: pointer; }
.tv-pick svg { width: 14px; height: 14px; rotate: -90deg; transition: rotate .2s var(--ease-out); }
.tv-pick[aria-expanded="true"] svg { rotate: 90deg; }
.tv-telas { position: fixed; z-index: 21; top: 68px; right: 24px; width: 400px; display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: rgb(var(--glass)); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 48px -24px rgba(0, 0, 0, .8); animation: tv-menu .2s var(--ease-out) both; }
@keyframes tv-menu { from { opacity: 0; transform: translateY(-8px); } }
.tv-way, .tv-t { appearance: none; border: 1px solid transparent; background: var(--card-2); color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s; }
.tv-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tv-way { display: grid; align-content: start; gap: 4px; padding: 12px; border-radius: 12px; text-align: left; }
.tv-way b { font: 700 16px/1.1 var(--f-sans); }
.tv-way small { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.tv-tl { margin: 8px 0 0; font: 700 12px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tv-tg { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.tv-tg.is-br { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tv-t { min-height: 36px; padding: 0 4px; border-radius: 8px; font: 700 14px/1 var(--f-sans); }
.tv-tg.is-br .tv-t { min-height: 40px; font-weight: 600; }
.tv-way.is-on, .tv-t.is-on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, transparent); }
@media (hover: hover) { .tv-way:not(.is-on):hover, .tv-t:not(.is-on):hover, .tv-back:hover { border-color: rgba(255, 255, 255, .3); } }
@media (prefers-reduced-motion: reduce) { .tv-telas { animation: none; } }
/* the lower third and the ticker */
.is-tv .tv-foot { position: fixed; z-index: 20; left: 24px; right: 24px; bottom: 16px; display: grid; gap: 8px; }
/* the full screen's one ad: an LED board at the end of the lower third, as tall as it; the page's places hide */
.is-tv #ad-nobre, .is-tv #ad-lateral { display: none !important; }
.tv-low { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 400px); gap: 8px; align-items: stretch; }
/* the lower third keeps one height whatever it shows, and the panels above keep their room and a gap over it (the map
   is never resized as it turns): 16 + 44 (the ticker) + 8 + 144 + 16 */
.is-tv .tv-low { height: 144px; }
.is-tv .tv-hl { min-height: 0; height: 100%; overflow: hidden; }
.tv-low:has(> .ad-tv[hidden]) { grid-template-columns: minmax(0, 1fr); }
.ad-tv { container-type: size; } /* as tall as the lower third, never taller: the foot keeps its height and its gap */
.ad-tv .af-slider, .ad-tv .af-p > *, .ad-tv .ad-box { height: 100%; }
#ad-tv .af-slider { --wave: .36s; }
.is-tv .ad-tv .ad-row.is-free { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag cta" "title cta" "roll roll"; align-content: center; row-gap: 4px; padding: 16px 20px; }
.ad-tv .af-text { display: contents; }
.ad-tv .af-text .ad-tag { grid-area: tag; align-self: end; }
.ad-tv .af-text b { grid-area: title; align-self: start; }
.ad-tv .ad-row.is-free .ad-cta { grid-area: cta; }
.is-tv .ad-tv .ad-row.is-free .af-roll { display: block; grid-area: roll; }
.ad-tv .ad-box img { height: 100%; object-fit: contain; }
.tv-hl { min-height: 128px; display: grid; align-content: center; gap: 12px; padding: 16px 24px; border-radius: 16px; background: rgba(var(--glass), .92); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 48px -24px rgba(0, 0, 0, .8); }
.tv-hl.is-in { animation: tv-in .5s var(--ease-out) both; }
.tv-hl.is-now { box-shadow: inset 0 0 0 2px var(--blue-hi), 0 24px 48px -24px rgba(0, 0, 0, .8); }
@keyframes tv-in { from { opacity: 0; transform: translateY(12px); } }
.th-tag { margin: 0; display: flex; align-items: center; gap: 12px; font: 700 13px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.th-tag b { color: var(--ink); }
.th-now { padding: 4px 8px; border-radius: 6px; background: var(--blue-hi); color: #0a2414 !important; }
.th-race { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.th-c { --c: var(--line-2); display: flex; align-items: center; gap: 16px; min-width: 0; }
.th-c.is-b { flex-direction: row-reverse; text-align: right; }
.th-ph { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--card-2); box-shadow: 0 0 0 3px var(--c); }
.th-n { display: grid; gap: 4px; min-width: 0; }
.th-n b { font: 700 20px/1.1 var(--f-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-n small { font-size: 13px; color: var(--muted); white-space: nowrap; }
.th-p { margin-left: auto; font: 800 40px/1 var(--f-sans); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-c.is-b .th-p { margin: 0 auto 0 0; }
.th-c.is-won .th-n small { color: var(--go); }
.th-bar { position: relative; display: flex; gap: 2px; height: 10px; }
.th-bar i { height: 100%; }
.th-bar i:first-child { border-radius: 5px 0 0 5px; }
.th-bar i:last-of-type { margin-left: auto; border-radius: 0 5px 5px 0; }
.th-bar i.is-o { background: rgba(255, 255, 255, .14); }
.th-bar span { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; translate: -50% 0; background: var(--ink); }
.th-ev { display: flex; align-items: center; gap: 16px; }
.th-ev .f-ph, .th-ev .f-uf { width: 56px; height: 56px; font-size: 16px; border-radius: 50%; }
.th-ev .f-uf { border-radius: 12px; }
.th-ev div { display: grid; gap: 4px; min-width: 0; }
.th-big { font: 800 clamp(24px, 2.6vw, 40px)/1.1 var(--f-sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.th-ev small { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; color: var(--ink-2); }
.th-ev small i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; }
.tv-tick { display: flex; align-items: center; height: 44px; border-radius: 12px; overflow: hidden; background: rgba(var(--glass), .9); box-shadow: inset 0 0 0 1px var(--line-2); }
.tv-tick > b { align-self: stretch; display: grid; place-items: center; padding: 0 16px; background: var(--ink); color: #0a2414; font: 800 13px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; }
.tv-tick-m { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.tv-tick-r { display: flex; width: max-content; animation: tv-run var(--d, 60s) linear infinite; }
@keyframes tv-run { to { transform: translateX(-50%); } }
.tk-run { display: flex; align-items: center; flex: none; }
.tk-i { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.tk-i time { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-i b { color: var(--ink); }
.tk-i .f-ring { width: 12px; height: 12px; border-width: 2px; }
.tk-i .f-ph { width: 24px; height: 24px; }
.tk-i .f-uf { width: 24px; height: 24px; font-size: 10px; border-radius: 6px; }
.tk-i .nw i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
.tk-i .nw + .nw { margin-left: 8px; }
.tk-sep { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
@media (prefers-reduced-motion: reduce) { .tv-tick-r { animation: none; } }
/* on the full screen too, the count's progress in the card: how many sections, out of how many */
/* a laptop's screen: a shorter lower third, and the curve gives its room to the duel */
@media (max-height: 860px) {
  .is-tv .t2-dash.wrap { bottom: 204px; } /* 16 + 44 + 8 + 124 + 12 */
  .is-tv .tv-low { height: 124px; }
  .is-tv .tv-hl { padding: 12px 16px; gap: 8px; }
  .is-tv .th-ph, .is-tv .th-ev .f-ph, .is-tv .th-ev .f-uf { width: 44px; height: 44px; }
  .is-tv .th-p { font-size: 32px; }
  .is-tv .th-n b { font-size: 17px; }
  .is-tv .th-big { font-size: 26px; }
  .is-tv #t2-curve { display: none; }
  .is-tv .t2-duel { --ph: 64px; }
}

/* the scene's name in a corner of the map, and the lower thirds of the regions and of the count */
.tv-cap { display: none; }
.is-tv .tv-cap { position: absolute; left: 0; top: 0; z-index: 2; display: block; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(var(--glass), .85); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; color: var(--ink-2); }
.is-tv .tv-cap b { color: var(--ink); }
.tv-cap.is-in { animation: tv-cap .6s var(--ease-out) both; }
/* full screen: the numbers of what the map shows up close (a state, or a municipality picked), in its top corner */
.tv-data { display: none; }
.is-tv .tv-data:not([hidden]) { position: absolute; right: 0; top: 0; z-index: 2; width: min(360px, 36%); display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: rgb(var(--glass)); border: 1px solid var(--line-2); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .8); animation: tv-in .5s var(--ease-out) both; }
.tv-data .tc-b { width: 40px; height: 40px; font-size: 13px; border-radius: 12px; }
.tv-data .tc-t b { font-size: 20px; }
.tv-data .tc-t small { font-size: 13px; }
.tv-data .tc-c { gap: 12px; }
.tv-data .tc-ph { width: 40px; height: 40px; }
.tv-data .tc-n b { font-size: 16px; }
.tv-data .tc-n small { font-size: 13px; }
.tv-data .tc-p { font-size: 24px; }
.tv-data .tc-y { font-size: 13px; }
@media (max-height: 860px) { .tv-data .tc-y { display: none; } .tv-data .tc-p { font-size: 20px; } }
/* someone looking around the map: the scene's name becomes the way back to it */
.tv-back { display: none; }
.is-tv .tv-back:not([hidden]) { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgb(var(--glass)); color: var(--ink-2); font: 500 16px/1 var(--f-sans); cursor: pointer; animation: tv-cap .4s var(--ease-out) both; transition: border-color .2s; }
.tv-back svg { width: 16px; height: 16px; color: var(--ink); }
.tv-back b { color: var(--ink); font-weight: 700; }
.tv-back b + span::before { content: ''; display: inline-block; width: 1px; height: 16px; margin-right: 8px; vertical-align: -3px; background: var(--line-2); }
@keyframes tv-cap { from { opacity: 0; transform: translateX(-12px); } }
.is-tv .t2-strip { justify-content: center; }
.th-regs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.th-reg { display: grid; gap: 4px; min-width: 0; }
.th-reg small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.th-reg > b { font: 800 30px/1 var(--f-sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.th-reg > span:not(.th-rbar) { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.th-reg > span:not(.th-rbar) i { width: 8px; height: 8px; border-radius: 2px; }
.th-rbar { display: flex; gap: 2px; height: 4px; margin-top: 4px; }
.th-rbar i { height: 100%; }
.th-rbar i:last-child { flex: 1; }
.th-rbar i.is-rest { background: rgba(255, 255, 255, .08); }
.th-prog { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px 16px; }
.th-prog > b { font: 800 40px/1 var(--f-sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.th-prog > span { font-size: 16px; color: var(--ink-2); }
.th-prog .prog { grid-column: 1 / -1; height: 8px; border-radius: 4px; }
.th-prog .prog i { background: var(--go); box-shadow: 0 0 12px color-mix(in srgb, var(--go) 55%, transparent); }
.th-prog small { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
@media (max-height: 860px) { .th-reg > b, .th-prog > b { font-size: 26px; } }
.is-tv .t2-geo .t2-over svg { width: 100%; height: 100%; max-width: none; margin: 0; }
/* full screen: the premium banner above the map and the 320×100 under the duel, as on the page, a little more compact */
.is-tv #ad-nobre .ad-row { padding: 8px 16px; }
.is-tv #ad-nobre .ad-box img { height: 72px; width: auto; max-width: 100%; margin: 0 auto; }
.is-tv #ad-lateral .ad-row { min-height: 0; padding: 12px 16px; }
.is-tv #ad-lateral .ad-box img { max-height: 96px; width: auto; margin: 0 auto; }
/* the free places and our own ad, read from across the room: words and button grow with the screen's height, as the
   rest of the full screen does, in two lines only (the place and the name, the button beside them), so the places keep
   their height and the chart under the duel its room */
.is-tv .ad-row.is-free { grid-template-areas: "tag cta" "title cta"; align-content: center; row-gap: 4px; min-height: 0; padding: 12px 20px; }
.is-tv .ad-row.is-free .af-roll { display: none; }
.is-tv .ad-row.is-free .af-text .ad-tag { font-size: 12px; }
.is-tv .ad-row.is-free .af-text b { font-size: 20px; }
.is-tv .ad-row.is-free .ad-cta { min-height: 36px; padding: 0 16px; font-size: 15px; }
.is-tv .ad-row.is-free.is-marca .ad-cta { min-height: 0; padding: 0; }
.is-tv .is-marca .af-logo { height: 24px; }
.is-tv .ad-row.is-free.is-marca.is-led .ad-cta { min-height: 36px; padding: 0 16px; }
@media (max-height: 860px) {
  .is-tv .ad-row.is-free { padding: 8px 16px; }
  .is-tv .ad-row.is-free .af-text b { font-size: 18px; }
  .is-tv .ad-row.is-free .ad-cta { min-height: 32px; font-size: 14px; }
  .is-tv .is-marca .af-logo { height: 20px; }
}
/* and everything a little bigger, in step with the screen */
.is-tv .t2-chip-uf { min-height: 44px; font-size: 15px; }
.is-tv .t2-chip-uf small { font-size: 14px; }
.is-tv .k-who { font-size: 15px; }
.is-tv .tv-cap { font-size: 16px; padding: 8px 16px; }
.is-tv .t2-mt-t h2 { font-size: 30px; }
/* the map takes the room: no subtitle, the key on the title's line, tighter gaps */
.is-tv .t2-map-card { position: relative; gap: 12px; grid-template-rows: auto minmax(0, 1fr) auto; }
.is-tv .t2-mt-t p { display: none; }
.is-tv .t2-key { position: absolute; top: 28px; right: 24px; left: 240px; justify-content: flex-end; }

/* ---------- Audiência: the public numbers, for whoever thinks of advertising (public/audiencia.js) ---------- */
.t2-page.au-page .wrap { max-width: 1200px; }
.au { padding-block: calc(96px + env(safe-area-inset-top, 0px)) 64px; }
.au-head { display: grid; gap: 8px; justify-items: start; margin-bottom: 24px; }
.au-h1 { margin: 0; max-width: 18ch; font: 800 clamp(32px, 5vw, 56px)/1.02 var(--f-sans); letter-spacing: -.04em; text-wrap: balance; }
.au-live { margin-top: 8px; }
.au-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; }
.au-tile { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 24px; background: color-mix(in srgb, var(--card) 86%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -32px rgba(0, 0, 0, .7); }
.au-lab { font: 600 13px/1.3 var(--f-sans); color: var(--muted); }
.au-num { margin-top: auto; padding-top: 8px; font: 700 clamp(36px, 4.4vw, 56px)/1 var(--f-sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.au-sub { font-size: 13px; line-height: 1.35; color: var(--ink-2); text-wrap: pretty; }
/* the total, big, with every day under it */
.au-hero { grid-column: span 2; grid-row: span 2; }
.au-hero .au-num { margin-top: 8px; font-size: clamp(64px, 9vw, 120px); }
.au-days { display: flex; align-items: flex-end; gap: 4px; height: 112px; margin-top: auto; padding-top: 32px; }
.au-days .col { flex: 1; max-width: 48px; }
.au-days .col i { max-width: none; background: color-mix(in srgb, var(--blue-hi) 42%, var(--card-2)); }
.au-days .col.is-el i { background: var(--blue-hi); }
.au-days .col i { position: relative; }
.au-days .col b { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; font-size: 11px; font-weight: 700; font-style: normal; color: var(--ink); white-space: nowrap; }
/* a few days only: each one dated under its bar */
.au-days.is-dated { height: 132px; }
.au-days.is-dated .col { padding-bottom: 20px; }
.au-days .col span { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
/* where they read from: the states as same-size squares, roughly where they sit */
.au-map-t { grid-row: span 2; }
.au-map { flex: none; width: min(100%, 216px); height: auto; aspect-ratio: 6 / 8; margin: 12px auto 8px; }
.au-wide { grid-column: span 3; }
.au-bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.au-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; color: var(--ink); }
.au-bars b { font-variant-numeric: tabular-nums; }
.au-bars i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.au-bars i::before { content: ''; display: block; width: var(--w); height: 100%; border-radius: 3px; background: var(--blue-hi); }
.au-eng { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.au-eng div { display: grid; align-content: start; gap: 4px; }
.au-eng b { font: 700 clamp(28px, 3vw, 40px)/1 var(--f-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.au-eng span { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
/* and the way to be part of it */
.au-cta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px; background: color-mix(in srgb, #ffd400 9%, color-mix(in srgb, var(--card) 86%, transparent)); box-shadow: inset 0 0 0 1px rgba(255, 212, 0, .22), 0 24px 48px -32px rgba(0, 0, 0, .7); }
.au-cta h2 { margin: 4px 0; font: 700 clamp(22px, 2.6vw, 30px)/1.1 var(--f-sans); letter-spacing: -.03em; }
.au-cta p { margin: 0; max-width: 52ch; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.au-go { min-width: 240px; }
@media (max-width: 900px) {
  .au-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-hero, .au-wide, .au-map-t { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .au { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
  .au-grid { gap: 8px; }
  .au-tile { padding: 16px; border-radius: 20px; }
  .au-num { font-size: 36px; }
  .au-hero .au-num { font-size: 64px; }
  .au-days { height: 96px; }
  .au-eng { gap: 8px; }
  .au-cta { padding: 20px 16px; }
  .au-go { width: 100%; min-width: 0; }
}

/* ---------- the races: a tab each, on the bar (turno2.js: area) ---------- */
.fp-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fp-nav a { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); font: 600 14px/1 var(--f-sans); text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.fp-nav a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: var(--ink); }
@media (hover: hover) { .fp-nav a:not([aria-current="page"]):hover { color: var(--ink); background: rgba(255, 255, 255, .05); } }
/* "Eleitos no 1º turno": a button like the tabs, and its small menu under it */
.fp-more { position: relative; flex: none; }
.fp-more-b { appearance: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 14px/1 var(--f-sans); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.fp-more-b.is-on { background: rgba(255, 255, 255, .1); color: var(--ink); }
.fp-more-b[aria-expanded="true"] { color: var(--ink); background: rgba(255, 255, 255, .06); }
@media (hover: hover) { .fp-more-b:not(.is-on):hover { color: var(--ink); background: rgba(255, 255, 255, .05); } }
.fp-more-s { display: none; }
.fp-more-c { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
.fp-more-b[aria-expanded="true"] .fp-more-c { transform: rotate(180deg); }
.fp-more-m { position: absolute; top: calc(100% + 8px); left: 0; z-index: 90; display: grid; gap: 2px; min-width: 240px; padding: 6px; border-radius: 14px; background: rgb(var(--glass)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .25s var(--ease-out); }
.fp-more-m.is-open { opacity: 1; transform: none; }
.fp-more-m a { height: 44px; padding: 0 12px; border-radius: 10px; }
.fp-more-m a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .fp-more-m, .fp-more-c { transition: none; } }
@media (max-width: 560px) { .fp-more-l { display: none; } .fp-more-s { display: inline; } } /* a phone: the short name, so the three fit */
/* a narrower screen: the tabs in a row of their own under the bar, sliding sideways like an app's */
@media (max-width: 1099px) {
  .fp-nav { position: absolute; left: 0; right: 0; top: calc(100% + 8px); height: 48px; padding: 0 6px; border-radius: 14px; overflow: visible; background: rgba(var(--glass), .72); border: 1px solid rgba(255, 255, 255, .08); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .fp-nav::-webkit-scrollbar { display: none; }
  .fp-nav > a, .fp-more { flex: 1 1 0; }
  .fp-nav > a, .fp-more-b { justify-content: center; width: 100%; padding: 0 8px; }
  .fp-more-m { left: auto; right: 0; }
  .t2-page:not(.is-tv) .t2-top { padding-top: calc(128px + env(safe-area-inset-top, 0px)); }
}
/* each race shows its own cards; the president's stay on the full screen, where the duel is always on */
.a-only { display: none; }
body[data-area]:not([data-area="pres"]):not(.is-tv) .a-only { display: grid; }
body[data-area]:not([data-area="pres"]):not(.is-tv) .pres-only, body[data-area]:not([data-area="pres"]) #t2-scrub { display: none !important; }
.a-stat { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--ink-2); }
.a-stat b { font: 800 32px/1 var(--f-sans); letter-spacing: -.02em; color: var(--ink); margin-right: 8px; font-variant-numeric: tabular-nums; }
.a-par { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.a-par li { display: grid; grid-template-columns: 12px minmax(64px, auto) minmax(0, 1fr) 32px; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.a-par li > i { width: 12px; height: 12px; border-radius: 4px; }
.a-par li > span:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-par li > b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.a-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.a-bar i { display: block; height: 100%; border-radius: 4px; }
.a-more { margin: 0; font-size: 13px; color: var(--muted); }
.a-plen { max-width: 100%; }
.a-rows .r-lead { gap: 8px; }
.a-rows .r-lead b { font-weight: 600; }
.a-rows .r-top { flex: none; gap: 4px; }
.r-pa { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tc-dot { width: 12px; height: 12px; margin: 0 10px; border-radius: 4px; }
.tc-c.is-area li { min-height: 32px; }
.a-sheet .tc-c { gap: 12px; }
.k-two { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, var(--ink-2) 50%, var(--muted) 50%); }
/* made-up numbers (local testing, the demo): always said so */
.demo-tag { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 95; margin: 0; padding: 8px 16px; border-radius: 999px; background: #f5c518; color: #1a1400; font: 700 13px/1 var(--f-sans); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .8); pointer-events: none; }
.is-tv .demo-tag { display: none; }
.tv-live.is-demo { background: #f5c518; color: #1a1400; }
/* the rehearsal (real names, made-up count): the whole screen says so, so no picture of it passes for a result */
.ensaio-wm { position: fixed; inset: 0; z-index: 94; pointer-events: none; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260'%3E%3Ctext x='260' y='140' text-anchor='middle' transform='rotate(-24 260 130)' font-family='Arial,sans-serif' font-size='30' font-weight='700' fill='%23ffffff'%3EENSAIO · NÚMEROS FICTÍCIOS%3C/text%3E%3C/svg%3E"); background-size: 520px 260px; }
/* ---------- governors, as on a TV broadcast (turno2.js paintPics, govSum) ---------- */
.t2-geo .g-pic, .t2-geo .g-cal { transform: translate(var(--x), var(--y)) scale(calc(var(--k, 1) * var(--ps, 1))); transform-origin: 0 0; transform-box: view-box; }
.g-pics, .g-call { pointer-events: none; }
.t2-geo svg:not(.is-pics) .g-pics, .t2-geo svg:not(.is-pics):not(.is-calls) .g-call, .t2-geo svg.is-pics .g-labs { display: none; }
.t2-geo svg.is-zoom .g-pic:not(.on), .t2-geo svg.is-zoom .g-call, .t2-geo svg.is-anim .g-pics, .t2-geo svg.is-anim .g-call, .t2-geo svg.no-call .g-call { display: none; }
.g-pic circle, .g-cal circle { stroke: var(--card); stroke-width: 1.5px; }
.g-pic text { font: 700 12px/1 var(--f-sans); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 3px; stroke-linejoin: round; }
.g-pic .g-pp { font-size: 11px; font-weight: 600; fill: var(--ink-2); }
.g-cal rect { stroke: rgba(255, 255, 255, .2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.g-cal text { font: 700 12px/1 var(--f-sans); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .3); stroke-width: 2px; }
.g-cal .g-cp { font-weight: 600; }
.g-cal.is-lt text { fill: #04230f; stroke: none; } /* a pale (still counting) chip: dark letters */
.g-lead { stroke: rgba(255, 255, 255, .35); stroke-width: 1px; vector-effect: non-scaling-stroke; }
@media (max-width: 760px) { .t2-geo .g-call { display: none; } }
.k-shade { gap: 4px; color: var(--muted); }
.k-shade i { width: 10px; height: 10px; border-radius: 3px; }
.k-lt { background: color-mix(in srgb, var(--ink-2) 55%, #fff); }
/* the left column: each runoff as a small duel, then the governors elected in the 1st round */
.a-stat2 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 15px; color: var(--ink-2); }
.a-stat2 b { font: 800 28px/1 var(--f-sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.a-stat2 span { color: var(--muted); }
.a-sh { margin: 4px 0 0; font: 700 12px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.a-duels { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.a-duel { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.a-duel:last-child { padding-bottom: 0; border-bottom: 0; }
.a-dh { appearance: none; border: 0; background: none; padding: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); font: 500 12px/1.2 var(--f-sans); text-align: left; cursor: pointer; }
.a-dh b { font: 600 14px/1.2 var(--f-sans); color: var(--ink); }
.a-ds { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--muted); }
.a-ds.is-lead { color: var(--ink); }
.a-dn { display: grid; min-width: 0; }
.a-dn b { font: 600 14px/1.2 var(--f-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-dn small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.a-dp { font: 700 16px/1 var(--f-sans); font-variant-numeric: tabular-nums; }
.a-ds:not(.is-lead) .a-dp { font-weight: 600; color: var(--ink-2); }
.a-db { display: flex; gap: 2px; height: 6px; margin-left: 36px; }
.a-db i { height: 100%; border-radius: 3px 0 0 3px; }
.a-db i:last-child { flex: 1; border-radius: 0 3px 3px 0; }
.a-ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--card-2); box-shadow: 0 0 0 2px var(--c); }
.a-ds:not(.is-lead) .a-ph { opacity: .6; }
.a-els { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 12px 8px; }
.a-el { appearance: none; border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; color: var(--ink); cursor: pointer; }
.a-el .a-ph { width: 40px; height: 40px; }
.a-el b { font: 700 12px/1 var(--f-sans); }
.a-el small { font-size: 11px; line-height: 1; color: var(--muted); white-space: nowrap; }
/* on the governors' tab, the latest news stay on the right, where the list of states would be */
body[data-area="gov"]:not(.is-tv) #t2-feed { display: grid !important; }
body[data-area="gov"] #a-list { display: none !important; }
/* a counted state bright enough for dark letters (its label and its chip) */
.t2-chip-uf.is-dk { color: #04230f; }
/* the governors' switch: the states it leaves out stay faint */
.t2-geo .g-ufs path.is-dim { opacity: .14; }
.t2-chip-uf.is-dim { opacity: .4; }

/* ---------- the last line of every footer: terms, policies and contact ---------- */
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; letter-spacing: -.01em; }
.foot-legal > * { padding-block: 8px; }
.foot-legal span { margin-right: auto; }
.foot .foot-legal a { color: var(--ink-2); text-decoration: none; }
.foot .foot-legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.foot-min { padding-top: 16px; }
.foot-min .foot-legal { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 640px) { .foot-legal span { flex-basis: 100%; } }

/* ---------- Termos, Privacidade, Publicidade (scripts/legal.mjs) ---------- */
.lg { padding-block: calc(96px + env(safe-area-inset-top, 0px)) 64px; }
.lg .wrap { max-width: 768px; }
.lg-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; width: fit-content; max-width: 100%; margin-bottom: 40px; padding: 4px; border-radius: 16px; background: var(--card); }
.lg-tabs a { padding: 8px 16px; border-radius: 12px; text-align: center; color: var(--muted); font: 600 14px/20px var(--f-sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s; }
.lg-tabs a:hover { color: var(--ink); }
.lg-tabs a[aria-current="page"] { background: var(--card-2); color: var(--ink); }
.legal h1 { margin: 0 0 16px; font: 800 clamp(32px, 5vw, 48px)/1.08 var(--f-sans); letter-spacing: -.035em; text-wrap: balance; }
.legal h2 { margin: 40px 0 8px; font: 700 20px/28px var(--f-sans); letter-spacing: -.02em; color: var(--ink); }
.legal p, .legal li { font-size: 16px; line-height: 24px; color: var(--ink-2); text-wrap: pretty; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.legal li::marker { color: var(--muted); }
.legal a { color: var(--ink); text-underline-offset: 2px; }
.legal b { color: var(--ink); font-weight: 600; }
.legal .legal-lead { font-size: 19px; line-height: 28px; color: var(--ink); }
.legal .legal-date { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
@media (max-width: 560px) {
  .lg { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
  .lg-tabs { width: 100%; margin-bottom: 32px; }
  .lg-tabs a { padding-inline: 8px; }
  .legal h2 { margin-top: 32px; }
}

/* ---------- Anunciar: the builder of an ad, its preview and the order (public/anunciar.js) ---------- */
.anb-body [hidden] { display: none !important; }
.anb-body .wrap { max-width: 1200px; }
.anb { padding-block: calc(96px + env(safe-area-inset-top, 0px)) 64px; }
.anb-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .anb-grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; } .anb-side { position: sticky; top: 88px; } }
.anb-main { display: grid; gap: 16px; min-width: 0; }
.anb-head { display: grid; gap: 8px; margin-bottom: 8px; }
.anb-h1 { margin: 0; font: 800 clamp(30px, 4vw, 44px)/1.05 var(--f-sans); letter-spacing: -.04em; text-wrap: balance; }
.anb-lede { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); text-wrap: pretty; }
.anb-form { display: grid; gap: 16px; }
.anb-step, .anb-card, .anb-prev { display: grid; gap: 12px; padding: 20px; border-radius: 16px; background: color-mix(in srgb, var(--card) 86%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045), 0 24px 48px -32px rgba(0, 0, 0, .7); }
.anb-step h2 { margin: 0; display: flex; align-items: center; gap: 12px; font: 700 18px/24px var(--f-sans); letter-spacing: -.02em; }
.anb-step h2 i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ffd400; color: #141100; font: 800 13px/1 var(--f-sans); font-style: normal; }
/* the places, each with the little drawing of the page */
.anb-esps { display: grid; gap: 8px; }
.anb-esp { position: relative; display: block; cursor: pointer; }
.anb-esp input { position: absolute; opacity: 0; }
.anb-esp-in { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s, background-color .2s; }
.anb-esp input:checked + .anb-esp-in { background: color-mix(in srgb, #ffd400 8%, var(--card-2)); box-shadow: inset 0 0 0 2px #ffd400; }
.anb-esp input:focus-visible + .anb-esp-in { outline: 3px solid var(--focus); outline-offset: 2px; }
.anb-esp.is-off { cursor: not-allowed; opacity: .55; }
.anb-esp svg { display: block; width: 72px; height: auto; }
.anb-esp svg rect { fill: rgba(246, 248, 241, .08); }
.anb-esp svg .w-page { fill: rgba(246, 248, 241, .04); }
.anb-esp svg .w-map { fill: rgba(246, 248, 241, .05); }
.anb-esp svg .w-br { fill: rgba(246, 248, 241, .16); }
.anb-esp svg[data-s="nobre"] [data-k="nobre"], .anb-esp svg[data-s="lateral"] [data-k="lateral"], .anb-esp svg[data-s="padrao"] [data-k="padrao"], .anb-esp svg[data-s="todos"] [data-k] { fill: #ffd400; }
.anb-esp-t { display: grid; gap: 2px; min-width: 0; }
.anb-esp-t b { font-size: 15px; line-height: 20px; color: var(--ink); }
.anb-esp-t small { font-size: 12px; line-height: 16px; color: var(--muted); text-wrap: pretty; }
.anb-esp-p { display: grid; justify-items: end; gap: 2px; text-align: right; }
.anb-esp-p b { font-size: 15px; line-height: 20px; color: var(--ink); white-space: nowrap; }
.anb-esp-p small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.anb-esp-p em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
/* the fields */
.anb-fields { display: grid; gap: 12px; }
.anb-two { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.anb-look { align-items: center; }
.an-f em { font-style: normal; font-weight: 500; color: var(--muted); }
.anb-seg { display: flex; width: 100%; }
.anb-seg button { flex: 1; padding: 0 12px; }
.anb-file { position: relative; }
.anb-drop { display: grid; gap: 4px; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--line-2); background: rgba(255, 255, 255, .02); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.anb-drop b { font-size: 14px; color: var(--ink); }
.anb-drop b em { font-style: normal; font-weight: 500; color: var(--muted); }
.anb-drop span { font-size: 12px; line-height: 16px; color: var(--muted); }
.anb-file.is-over .anb-drop, .anb-drop:hover { border-color: #ffd400; background: color-mix(in srgb, #ffd400 6%, transparent); }
.anb-thumb { position: relative; display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 12px 48px; border-radius: 16px; background: repeating-conic-gradient(rgba(255, 255, 255, .06) 0% 25%, transparent 0% 50%) 50% / 16px 16px; box-shadow: inset 0 0 0 1px var(--line-2); }
.anb-thumb img { display: block; max-width: 100%; max-height: 72px; object-fit: contain; }
.anb-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); font: 600 18px/1 var(--f-sans); cursor: pointer; }
.anb-adj { position: absolute; bottom: 8px; right: 8px; min-height: 32px; padding: 0 12px; border-radius: 16px; border: 0; background: var(--card); color: var(--ink); font: 600 13px/1 var(--f-sans); cursor: pointer; }
.anb-file.is-ico .anb-thumb img { width: 72px; height: 72px; border-radius: 18px; }
/* what went wrong with a file, right under it */
.anb-ferr { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--fix) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fix) 60%, transparent); color: var(--ink); font: 600 14px/20px var(--f-sans); }
/* the logo's cut: the square drawn as the board's icon (rounded the same), on a checkerboard for what is see-through */
@media (min-width: 820px) { .anb-crop { width: min(480px, calc(100vw - 24px)); } }
.anb-crop-b { display: grid; gap: 16px; justify-items: center; }
.anb-crop-st { position: relative; width: min(320px, 100%); overflow: hidden; border-radius: 12px; touch-action: none; cursor: default; user-select: none; -webkit-user-select: none;
  background: repeating-conic-gradient(rgba(255, 255, 255, .1) 0% 25%, rgba(255, 255, 255, .03) 0% 50%) 50% / 16px 16px; box-shadow: 0 0 0 1px var(--line-2); }
.anb-crop-st.is-q { border-radius: 25%; cursor: grab; }
.anb-crop-st.is-q:active { cursor: grabbing; }
.anb-crop-st:focus-visible { outline: 2px solid #ffd400; outline-offset: 4px; }
.anb-crop-st img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.anb-crop-z { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; width: min(320px, 100%); font-size: 14px; color: var(--ink-2); }
.anb-crop-z input { width: 100%; accent-color: #ffd400; }
.anb-crop-go { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
@media (max-width: 819px) { .anb-crop-go { grid-template-columns: minmax(0, 1fr); } .anb-crop-go #anb-crop-ok { order: -1; } }
.anb-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.anb-color { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border-radius: 12px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.anb-color input { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.anb-color input::-webkit-color-swatch-wrapper { padding: 0; }
.anb-color input::-webkit-color-swatch { border: 1px solid rgba(255, 255, 255, .24); border-radius: 8px; }
.anb-color input::-moz-color-swatch { border: 1px solid rgba(255, 255, 255, .24); border-radius: 8px; }
.anb-rule, .anb-note { margin: 0; font-size: 12px; line-height: 18px; color: var(--muted); text-wrap: pretty; }
.anb-note a, .anb-rule a { color: var(--ink-2); }
/* the summary and the button */
.anb-tot { margin: 0; display: grid; gap: 8px; }
.anb-tot div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.anb-tot dt { color: var(--muted); }
.anb-tot dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.anb-ck { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); cursor: pointer; }
.anb-ck input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #ffd400; }
.anb-ck a { color: var(--ink); }
.anb-go, .anb-wa { width: 100%; }
/* the preview: the board alone, on the page's own background, or the page itself in a frame (scaled: transform) */
.anb-prev-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.anb-prev-h b { font-size: 16px; }
.anb-prev-h .anb-seg { width: auto; }
.anb-prev-h .anb-seg button { flex: none; }
.anb-alone { display: grid; justify-items: center; gap: 12px; padding: 24px 16px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.anb-ad { display: grid; gap: 16px; justify-items: center; width: 100%; }
.anb-one { display: grid; gap: 8px; width: min(100%, var(--w, 728px)); }
.anb-one small { font-size: 12px; color: var(--muted); text-align: center; }
.anb-empty { padding: 24px; border-radius: 16px; border: 1.5px dashed var(--line-2); text-align: center; font-size: 13px; color: var(--muted); }
.anb-cap { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted); text-align: center; text-wrap: pretty; }
.anb-cap b { color: var(--ink-2); }
.anb-inpage { display: grid; gap: 12px; }
.anb-frame { position: relative; overflow: hidden; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.anb-frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: var(--bg); }
.anb-frame.is-cel { background: transparent; box-shadow: none; }
.anb-frame.is-cel iframe { border-radius: 32px; box-shadow: 0 0 0 8px #0b0b0c, 0 24px 48px -16px rgba(0, 0, 0, .8); }
/* the order sent, and as its buyer follows it */
.anb-done { display: grid; gap: 16px; }
.anb-card p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.anb-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.anb-code b { font: 700 18px/1 var(--f-mono); letter-spacing: .04em; color: var(--ink); }
.anb-st { padding: 4px 12px; border-radius: 999px; background: var(--card-2); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.anb-st.is-aprovado { background: color-mix(in srgb, var(--go) 18%, transparent); color: var(--go); }
.anb-st.is-recusado, .anb-st.is-retirado { background: color-mix(in srgb, var(--fix) 18%, transparent); color: var(--fix); }
.anb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.anb-steps li { padding-top: 8px; border-top: 4px solid var(--line-2); font-size: 12px; line-height: 16px; color: var(--muted); }
.anb-steps li.is-done { border-color: #ffd400; color: var(--ink-2); }
.anb-steps li.is-now { border-color: color-mix(in srgb, #ffd400 45%, var(--line-2)); color: var(--ink); font-weight: 600; }
/* on a phone (and a tablet): one column, the preview right after the ad is made */
@media (max-width: 999px) {
  .anb-grid { display: flex; flex-direction: column; gap: 16px; }
  .anb-main, .anb-form { display: contents; }
  .anb-head { order: 0; }
  .anb-done { order: 1; }
  .anb-form .anb-step:nth-of-type(1) { order: 1; }
  .anb-form .anb-step:nth-of-type(2) { order: 2; }
  .anb-side { order: 3; }
  .anb-form .anb-step:nth-of-type(3) { order: 4; }
  .anb-form .anb-step:nth-of-type(4) { order: 5; }
}
@media (max-width: 560px) {
  .anb { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
  .anb-step, .anb-card, .anb-prev { padding: 16px; border-radius: 16px; }
  .anb-two { grid-template-columns: minmax(0, 1fr); }
  .anb-esp-in { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; }
  .anb-esp svg { width: 56px; }
  .anb-colors { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the dashboard's ad orders (public/painel.js) ---------- */
.pn-ped { display: grid; gap: 12px; margin-top: 16px; padding: 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.pn-ped h2 { margin: 0; font: 700 18px/24px var(--f-sans); letter-spacing: -.02em; }
.pn-ped-note { margin: 0; font-size: 13px; line-height: 20px; color: var(--muted); }
/* the dashboard's two parts: the audience and the ads (with how many orders wait for something) */
.pn-tabs { margin-bottom: 16px; }
.pn-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 4px; border-radius: 999px; background: #ffd400; color: #141100; font: 700 12px/1 var(--f-sans); }
.pn-badge[hidden] { display: none; }
.pn-p.is-analise .pn-p-st { background: #ffd400; color: #141100; }
.pn-p .pn-p-ck { color: var(--ink-2); }
.pn-peds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pn-p { display: grid; gap: 8px; padding: 12px 16px; border-radius: 16px; background: var(--card-2); }
.pn-p-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--ink-2); }
.pn-p-h b { font-size: 15px; color: var(--ink); }
.pn-p-st { padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.pn-p.is-pago .pn-p-st { background: #ffd400; color: #141100; }
.pn-p.is-aprovado .pn-p-st { background: color-mix(in srgb, var(--go) 20%, transparent); color: var(--go); }
.pn-p.is-recusado, .pn-p.is-retirado, .pn-p.is-cancelado { opacity: .6; }
.pn-p p { margin: 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.pn-p p a { color: var(--ink-2); }
.pn-p-c { font-family: var(--f-mono); letter-spacing: .04em; }
.pn-p-a { display: flex; flex-wrap: wrap; gap: 8px; }
.cap-go { background: #ffd400; color: #141100; font-weight: 600; }
.an-alt { justify-self: center; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.anb-lede a { color: var(--ink); }
/* a board's square logo stands at the left of everything, as an app's icon, with the main words and the line beside it;
   the main words keep to one line */
.ad-row.is-free.is-ico { grid-template-columns: auto minmax(0, 1fr) auto; }
.af-ico { display: block; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.ad-lateral .ad-row.is-free.is-ico, .ad-padrao .ad-row.is-free.is-ico, .ad-tv .ad-row.is-free.is-ico, .is-tv .ad-tv .ad-row.is-free.is-ico { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico tag cta" "ico title cta" "ico roll roll"; }
/* a narrow board with an icon keeps just the arrow on its button, so the main words stay whole */
@container (max-width: 359px) { .ad-row.is-free.is-ico .ad-cta { width: 36px; min-height: 36px; padding: 0; justify-content: center; } .ad-row.is-free.is-ico .af-cta-t { display: none; } }
.ad-lateral .is-ico .af-ico, .ad-padrao .is-ico .af-ico, .ad-tv .is-ico .af-ico { grid-area: ico; width: 56px; height: 56px; align-self: center; }
.af-text b { min-width: 0; }
.af-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-lateral .is-led .af-nome, .ad-padrao .is-led .af-nome, .ad-tv .is-led .af-nome { font-size: 17px; }
.anb-shape { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-2); text-align: center; }
/* in the narrow places, a board's line may take two lines rather than be cut (the boards turning together keep the
   tallest one's height) */
.ad-lateral .af-roll.is-still, .ad-padrao .af-roll.is-still, .ad-tv .af-roll.is-still { height: auto; max-height: 36px; }
.ad-lateral .af-roll.is-still span, .ad-padrao .af-roll.is-still span, .ad-tv .af-roll.is-still span { position: static; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; }
/* the builder's preview (/demo in its frame): the place being bought, ringed in our yellow */
.ad.is-previa .af-slider, .ad.is-previa .ad-box { box-shadow: 0 0 0 2px #ffd400, 0 0 24px rgba(255, 212, 0, .35); }

/* the Pix of an approved order (/anunciar): the QR on white, the "copia e cola" with its button, who receives it */
.anb-pix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: stretch; margin: 16px 0; padding: 16px; border-radius: 16px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.anb-pix-qr { width: 200px; justify-self: center; padding: 8px; border-radius: 12px; background: #fff; line-height: 0; }
.anb-pix-qr svg { width: 100%; height: auto; }
.anb-pix-t { display: grid; gap: 8px; min-width: 0; }
.anb-pix-t p { margin: 0; }
.anb-pix-v { font-size: 18px; }
.anb-pix-c { display: flex; gap: 8px; }
.anb-pix-c input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); font: 13px/1 var(--f-mono); }
.anb-pix-c .btn { min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
@media (max-width: 560px) { .anb-pix-c { flex-direction: column; } }

/* skeletons (the election page): while a block waits for its data, its shape in a quiet gray with a light passing
   over it, so the page never looks empty; each one goes by itself when its content arrives (:empty, :has) */
.t2-geo:empty, .t2-curve-plot:empty, #t2-feed-list:empty, #t2-reg-list:empty, #t2-gov-list:empty, #t2-uf:empty, #a-list:empty,
#t2-br:not(:has(.t2-sides)) { position: relative; overflow: hidden; }
.t2-geo:empty { min-height: 420px; }
.t2-curve-plot:empty { min-height: 168px; }
#t2-feed-list:empty, #t2-reg-list:empty, #t2-gov-list:empty, #a-list:empty { min-height: 232px; }
#t2-uf:empty { min-height: 240px; }
#t2-br:not(:has(.t2-sides)) { min-height: 360px; }
.t2-geo:empty::before, .t2-curve-plot:empty::before, #t2-uf:empty::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: rgba(255, 255, 255, .05); }
/* the lists: rows */
#t2-feed-list:empty::before, #t2-reg-list:empty::before, #t2-gov-list:empty::before, #a-list:empty::before { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .05) 0 40px, transparent 40px 48px); }
/* the duel: two faces, two numbers, the bar */
#t2-br:not(:has(.t2-sides))::before { content: ''; order: 9; height: 224px; border-radius: 16px;
  background: radial-gradient(circle at 28px 28px, rgba(255, 255, 255, .07) 27px, transparent 28px), radial-gradient(circle at calc(100% - 28px) 28px, rgba(255, 255, 255, .07) 27px, transparent 28px),
    linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) 0 88px / 40% 48px no-repeat, linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) 100% 88px / 40% 48px no-repeat,
    linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) 0 168px / 100% 8px no-repeat, linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)) 0 200px / 100% 24px no-repeat; }
/* the light passing (transform only, no repaint) */
.t2-geo:empty::after, .t2-curve-plot:empty::after, #t2-feed-list:empty::after, #t2-reg-list:empty::after, #t2-gov-list:empty::after, #t2-uf:empty::after, #a-list:empty::after,
#t2-br:not(:has(.t2-sides))::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, .06) 50%, transparent 80%); transform: translateX(-100%); animation: sk 1.6s ease-in-out infinite; will-change: transform; }
@keyframes sk { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .t2-geo:empty::after, .t2-curve-plot:empty::after, #t2-feed-list:empty::after, #t2-reg-list:empty::after, #t2-gov-list:empty::after, #t2-uf:empty::after, #a-list:empty::after, #t2-br:not(:has(.t2-sides))::after { animation: none; display: none; } }
.is-tv .t2-geo:empty { min-height: 0; }

/* the dashboard's prices: four values side by side (two by two on a phone) and the save button */
.pn-pr { display: grid; gap: 16px; }
.pn-pr-top { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px; }
.pn-pr label.switch { display: inline-flex; min-height: 44px; font-size: 15px; color: var(--ink-2); }
.pn-pr-cpm { width: min(240px, 100%); }
.pn-pr-t { display: grid; gap: 8px; }
.pn-pr-r { display: grid; grid-template-columns: minmax(120px, 1.2fr) repeat(2, minmax(0, 1fr)) minmax(96px, .8fr); gap: 12px; align-items: center; }
.pn-pr-r.is-h { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pn-pr-r > span { font-size: 14px; color: var(--ink-2); }
.pn-pr-r b { font: 700 16px/1 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--sun); }
.pn-pr-aud { margin: 0; font-size: 13px; color: var(--ink-2); }
.pn-pr > .cap { justify-self: start; }
.pn-pr label { display: grid; gap: 4px; min-width: 0; font-size: 13px; color: var(--muted); }
.pn-pr input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: 600 16px/1 var(--f-sans); font-variant-numeric: tabular-nums; }
.pn-pr .cap { min-height: 44px; }
.pn-pr-msg { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ink-2); }
.pn-pr-msg:empty { display: none; }
@media (max-width: 760px) { .pn-pr-r { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-pr-r > span:first-child { grid-column: 1 / -1; } .pn-pr-r.is-h > span:first-child { display: none; } .pn-pr > .cap { justify-self: stretch; } }

/* the dashboard's orders: what to know and do at the left, the ad as the page draws it at the right (under it on a
   phone); a tap on the ad opens it big, with its words, its link and the same buttons */
.pn-p { grid-template-columns: minmax(0, 1fr); }
.pn-p-i { display: grid; gap: 8px; min-width: 0; }
.pn-p-ad { display: grid; align-content: center; min-width: 0; padding: 12px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); cursor: zoom-in; }
.pn-p-ad .ad { margin: 0; }
.pn-p-ad:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 900px) { .pn-p { grid-template-columns: minmax(0, 1fr) 380px; align-items: center; gap: 16px; } }
.pn-dlg { width: min(820px, calc(100vw - 24px)); }
.pn-dlg-ads { display: grid; gap: 16px; justify-items: center; padding: 16px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.pn-dlg-ads .anb-one small { font-size: 12px; color: var(--muted); text-align: center; }
.pn-dlg-d { display: grid; gap: 8px; margin: 16px 0; }
.pn-dlg-d div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.pn-dlg-d dt { color: var(--muted); }
.pn-dlg-d dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.pn-dlg-d a { color: var(--ink); }

/* /anunciar's top bar: Suporte always in reach; on a phone it keeps its place and the way back to the count gives way */
@media (max-width: 560px) { .anb-body .lnav-acts .anb-apu { display: none; } }
/* the states' row under the map: on a computer or a tablet the map already writes every state (the small ones beside
   the coast), so the row goes and the map gets its height; on a phone it stays, the easy way to tap a small state */
@media (min-width: 820px) { .t2-page:not(.is-tv) .t2-strip { display: none; } }

/* the duel's bar between the two photos (no VS): each side's share from its own photo, the 50% mark between */
.t2-sides::before, .t2-vs { display: none; }
.t2-sides .t2-bar { position: absolute; top: calc(var(--ph) / 2 - 4px); left: calc(var(--ph) + 12px); right: calc(var(--ph) + 12px); }
.t2-duel.is-compact .t2-sides .t2-bar { top: calc(var(--ph) / 2 - 3px); }
/* a computer or a tablet: the page's top line goes (where the count stands is in the president's card), the map's title
   too while it shows the whole country (a state brings back its name and the way back), and its controls get smaller */
.t2-when { display: none; margin: -4px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.t2-when b { color: var(--ink-2); }
@media (min-width: 820px) {
  .t2-page:not(.is-tv) .t2-top-in { display: none; }
  .t2-page:not(.is-tv) .t2-top { padding-bottom: 0; }
  .t2-page:not(.is-tv) .t2-when { display: block; }
  .t2-page:not(.is-tv) .t2-mh:has(#t2-back[hidden]) .t2-mt { display: none; }
  .t2-page:not(.is-tv) .t2-mh .seg { padding: 2px; }
  .t2-page:not(.is-tv) .t2-mh .seg button { min-height: 32px; padding: 0 12px; font-size: 13px; }
}

/* where the count stands, once: on a computer or a tablet the card's small line says it (and the timeline under the map);
   on a phone, one compact line over a thin bar; on the full screen, as it was */
@media (min-width: 820px) { .t2-page:not(.is-tv) #t2-br .t2-prog { display: none; } }
@media (max-width: 819px) {
  .t2-page:not(.is-tv) .t2-prog { gap: 6px; padding-top: 12px; }
  .t2-page:not(.is-tv) .t2-prog p { flex-wrap: nowrap; white-space: nowrap; }
  .t2-page:not(.is-tv) .t2-prog .rp-pct { font-size: 16px; }
  .t2-page:not(.is-tv) .t2-prog p > span:not(.rp-sec) { overflow: hidden; text-overflow: ellipsis; }
}

/* a tablet held upright: the banner and the map first, across the whole width and as tall as the screen lets them; the
   cards follow in two columns */
@media (min-width: 820px) and (max-width: 1099px) and (orientation: portrait) {
  .t2-dash.wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t2-col.is-mid { grid-column: 1 / -1; grid-row: 1; position: static; }
  .t2-dash > .t2-col:not(.is-mid) > * { grid-column: auto; }
}
/* the map's hint line ("passe o mouse…") leaves a tablet too: its height goes to the map */
@media (min-width: 820px) { .t2-page:not(.is-tv) #t2-map-rule { display: none; } }

/* a computer: the latest news stay short (a few, the rest scroll inside the card), so the regions and the governors
   come up. On a tall screen the curve sits under the map (turno2.js, .is-fill) and stretches down to where the other
   columns end, never past the window: the column still stays in view */
@media (min-width: 1100px) {
  .t2-page:not(.is-tv) .t2-dash.wrap { align-items: stretch; }
  .t2-page:not(.is-tv) .t2-col.is-left, .t2-page:not(.is-tv) .t2-col.is-right, .t2-page:not(.is-tv) .t2-col.is-mid { align-self: start; }
  .t2-page:not(.is-tv) .t2-feed { max-height: 248px; }
  /* no bar: a soft fade at the foot says there is more, and goes once the end shows (turno2.js, .is-more) */
  .t2-feed { scrollbar-width: none; }
  .t2-feed::-webkit-scrollbar { display: none; }
  .t2-feed.is-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent); mask-image: linear-gradient(#000 calc(100% - 48px), transparent); }
  .t2-page:not(.is-tv) .t2-dash.is-fill .t2-col.is-mid { align-self: stretch; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
  .t2-dash.is-fill #t2-curve { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .t2-dash.is-fill .t2-curve-plot { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  .t2-dash.is-fill .cv-box { position: relative; min-height: 200px; height: 100%; }
  .t2-dash.is-fill .t2-curve-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* its drawing never sets the card's height */
}

/* ---------- Anuncie (/anuncie): the case for an ad on the 2nd round, before the builder (public/anuncie.js) ---------- */
.anv [hidden] { display: none !important; }
.anv main { padding: calc(96px + env(safe-area-inset-top, 0px)) 0 64px; }
.anv .wrap { max-width: 1120px; }
.anv-hero { display: grid; gap: 32px; align-items: center; }
.anv-hero-t { display: grid; gap: 16px; }
.anv-h1 { margin: 0; font: 800 clamp(36px, 5.2vw, 60px)/1.02 var(--f-sans); letter-spacing: -.045em; text-wrap: balance; }
.anv-lede { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-2); text-wrap: pretty; max-width: 560px; }
.anv-go { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.anv-from { margin: 0; font-size: 14px; color: var(--muted); }
.anv-frame { margin: 0; position: relative; display: none; }
.anv-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line-2), 0 32px 80px -24px rgba(0, 0, 0, .8); }
.anv-screen iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform: scale(var(--s, .5)); transform-origin: 0 0; pointer-events: none; }
.anv-screen-a { position: absolute; inset: 0; border-radius: 16px; }
.anv-screen-a:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }
.anv-frame figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }
.anv-sec { padding-top: 64px; }
.anv-h2 { margin: 0 0 16px; font: 800 clamp(24px, 3vw, 32px)/1.15 var(--f-sans); letter-spacing: -.03em; text-wrap: balance; }
.anv-sub { margin: 0 0 24px; color: var(--ink-2); max-width: 640px; }
.anv-sub a { color: var(--ink); }
.anv-3 { display: grid; gap: 16px; }
.anv-card { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; }
.anv-card h3 { margin: 0; font: 700 18px/1.3 var(--f-sans); letter-spacing: -.01em; }
.anv-card p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.anv-esp { transition: box-shadow .2s, transform .3s var(--ease-out); }
.anv-esp b { padding-top: 8px; font: 700 20px/1 var(--f-sans); color: var(--sun); }
.anv-esp:hover { box-shadow: inset 0 0 0 1px var(--sun); transform: translateY(-2px); }
.anv-placa { max-width: 728px; margin: 0 0 24px; }
.anv-placa .ad { margin: 0; }
.anv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: anv; }
.anv-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-content: start; counter-increment: anv; }
.anv-steps li::before { content: counter(anv); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: #241c00; font: 700 16px/1 var(--f-sans); }
.anv-steps b { font-size: 17px; padding-top: 8px; }
.anv-steps span { color: var(--ink-2); }
.anv-rules { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); max-width: 720px; }
.anv-end { text-align: left; }
.anv-lead { margin-top: 32px; padding: 24px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); max-width: 720px; }
.anv-lead p { margin: 0 0 12px; color: var(--ink-2); }
.anv-lead-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; }
.anv-lead input:not(.an-hp) { min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--ink); font: 400 16px/1 var(--f-sans); }
.anv-lead input:focus { outline: none; border-color: var(--sun); }
.anv-lead-ok { margin: 12px 0 0 !important; color: var(--ink) !important; font-weight: 600; }
@media (min-width: 820px) {
  .anv-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .anv-frame { display: block; }
  .anv-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .anv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .anv-steps li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .anv-steps li::before { grid-row: auto; margin-bottom: 8px; }
}
/* phones: the calls to action across the whole width, as in apps */
@media (max-width: 819px) {
  .anv main { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
  .anv-go .btn { flex: 1 1 100%; }
  .anv-sec { padding-top: 48px; }
  .anv-lead-f { grid-template-columns: minmax(0, 1fr); }
  .anv-lead .btn { width: 100%; }
}