/*
 * Página /referendo do site (referendo do beta, CASCABEL_REFERENDO_BETA_ENABLED). Celular primeiro, de 360 px para cima, sem
 * rolagem lateral. Tokens da bíblia de UI (client/src/ui-tokens.css), copiados aqui porque a página não passa pelo Vite:
 * couro, madeira e latão. A cédula usa o papel (--paper) com as figurinhas do álbum do jogo.
 */
:root{--surface-1:#1b1510;--surface-2:#241c15;--sunk:#140f0b;--line:#45372a;--line-strong:#8a6e50;--text:#f3ead9;--text-2:#d6c8ae;--text-3:#a89a82;--brass:#dfb36a;--brass-hi:#f0cd8a;--brass-ink:#1a1511;--paper:#e9dcc0;--paper-ink:#2b2118;--paper-ink-2:#5a4a3a;--carimbo:#8e2f1f;--focus:#f6d38a;--paper-focus:#6b4a14;--font-title:Georgia,"Gelasio","Times New Roman",serif;--font-body:"Inter","Segoe UI",system-ui,sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);font:16px/1.55 var(--font-body);background:radial-gradient(ellipse 80% 40% at 50% 30%,#2a2017 0,transparent 70%),var(--surface-1)}
p{margin:0}
a{color:var(--brass-hi);text-underline-offset:3px}
:is(a,button):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Faixa do topo */
.ref-faixa{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:9px 16px;background:var(--sunk);border-bottom:1px solid #6d5434;box-shadow:inset 0 -3px 0 var(--sunk),inset 0 -4px 0 rgba(223,179,106,.45);font:600 12px/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi);text-align:center}
.ref-faixa .t{color:var(--text-2)}
.ref-faixa a{letter-spacing:.04em;text-transform:none;font:700 14px var(--font-body);color:var(--brass-ink);background:linear-gradient(180deg,#f0cd8a,#d6a75c);padding:7px 16px;border-radius:999px;text-decoration:none}

/* Topo ilustrado */
.ref-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:620px;overflow:hidden;background:#1a130e}
.ref-hero picture img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:46% 100%}
.ref-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 34% at 50% 30%,rgba(20,15,11,.78),rgba(20,15,11,.35) 70%,transparent 100%),linear-gradient(180deg,rgba(20,15,11,.92) 0%,rgba(20,15,11,.55) 30%,rgba(20,15,11,0) 52%,rgba(27,21,16,0) 72%,rgba(27,21,16,.85) 92%,#1b1510 100%)}
.ref-nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;width:100%;max-width:1240px;margin:0 auto;padding:14px 16px}
.ref-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text)!important;text-decoration:none;font:600 16px/1 var(--font-title);letter-spacing:.2em}
.ref-brand img{width:26px;height:26px}
.ref-nav nav{display:flex;flex-wrap:wrap;gap:4px 20px;font:600 15px var(--font-body)}
.ref-nav nav a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.ref-nav nav a[aria-current=page]{color:var(--brass-hi);border-bottom:2px solid var(--brass)}
.ref-hero-text{width:100%;max-width:1000px;margin:12px auto 0;padding:0 16px;text-align:center;text-shadow:0 2px 3px rgba(20,15,11,.9),0 0 30px rgba(20,15,11,.8)}
.ref-orn{display:flex;align-items:center;justify-content:center;gap:12px;font:600 13px/1 var(--font-title);letter-spacing:.3em;color:var(--brass-hi);text-transform:uppercase}
.ref-orn::before,.ref-orn::after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--brass))}
.ref-orn::after{transform:scaleX(-1)}
.ref-hero h1{font:400 38px/1.06 var(--font-title);letter-spacing:-.02em;margin:14px 0;text-wrap:balance}
.ref-lede{font-size:17px;max-width:760px;margin:0 auto}
.ref-hero-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px;text-shadow:none}
.ref-tag{position:absolute;right:12px;bottom:84px;font:600 11px var(--font-body);color:var(--text-3);background:rgba(20,15,11,.65);padding:3px 9px;border-radius:999px}

/* Botões */
.ref-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border:0;border-radius:6px;background:linear-gradient(180deg,#f3d391,#dfb36a 55%,#c99a52);color:var(--brass-ink)!important;font:700 18px var(--font-body);text-decoration:none;cursor:pointer;box-shadow:0 0 0 1px #7d5a26,inset 0 1px 0 rgba(255,245,215,.8),0 10px 24px rgba(0,0,0,.4)}
.ref-btn:disabled{opacity:.55;cursor:not-allowed}
.ref-btn-sec{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 22px;border-radius:6px;background:rgba(20,15,11,.72);color:var(--text)!important;font:600 16px var(--font-body);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-strong)}
.ref-urna{width:24px;height:18px;border:2.5px solid currentColor;border-radius:2px;position:relative;flex:none}
.ref-urna::before{content:"";position:absolute;left:4px;right:4px;top:-2.5px;height:3px;background:currentColor}

main{position:relative;z-index:2;width:100%;max-width:1160px;margin:-40px auto 0;padding:0 16px 56px}

/* Mural de madeira */
.ref-mural{position:relative;padding:40px 18px 26px;border-radius:6px;background:#2a1f16 url(/assets/referendo/madeira.webp) center/cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 60px rgba(0,0,0,.55),0 18px 40px rgba(0,0,0,.5)}
.ref-placa{position:absolute;top:-18px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 22px;border-radius:4px;background:linear-gradient(180deg,#3b2b1d,#2a1f16);box-shadow:inset 0 0 0 1px #6d5434,inset 0 0 0 3px #2a1f16,inset 0 0 0 4px rgba(223,179,106,.5),0 6px 14px rgba(0,0,0,.5);font:700 13px/1 var(--font-title);letter-spacing:.26em;color:var(--brass-hi)}
.ref-mural-grid{display:grid;gap:28px;align-items:center}
.ref-papel{position:relative;padding:30px 22px 22px;background:var(--paper) url(/assets/referendo/papel.webp) center/cover;color:var(--paper-ink);box-shadow:0 1px 0 #b99f74,0 14px 26px rgba(0,0,0,.5)}
.ref-papel :focus-visible{outline-color:var(--paper-focus)}
.ref-prego{position:absolute;top:11px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9c4a0,#6b5a44 55%,#2b2118);box-shadow:0 2px 2px rgba(0,0,0,.5)}
.ref-prego.e{left:12px}.ref-prego.d{right:12px}.ref-prego.c{left:50%;margin-left:-7px}
.ref-eb{font:700 12px var(--font-body);letter-spacing:.2em;color:var(--carimbo);text-transform:uppercase}
.ref-papel h2{font:400 30px/1.12 var(--font-title);margin:8px 0 12px}
.ref-papel p{font:18px/1.55 var(--font-title)}
.ref-papel p+p{margin-top:10px}
.ref-assin{margin-top:14px!important;font-style:italic!important;font-size:16px!important;color:var(--paper-ink-2);text-align:right}
.ref-selos{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ref-selo{width:116px;height:116px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 34% 28%,#f8e2ae,#e0b46b 38%,#b0813f 70%,#6e4d1f);box-shadow:0 0 0 3px #4a3418,0 0 0 5px rgba(223,179,106,.35),inset 0 0 0 7px rgba(110,77,31,.35),inset 0 0 0 9px rgba(255,236,190,.45),0 10px 20px rgba(0,0,0,.55);color:#2b1c0c}
.ref-selo strong{font:700 30px/1 var(--font-title)}
.ref-selo span{font:700 11px/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.ref-selos small{flex-basis:100%;text-align:center;color:var(--text-2);font-size:15px;text-shadow:0 1px 2px #000}

/* Cédula */
.ref-titulo{text-align:center;margin:52px 0 20px}
.ref-titulo h2{font:400 34px/1.12 var(--font-title);margin:12px 0 6px}
.ref-titulo p{color:var(--text-2);font-size:16px}
.ref-cedula{position:relative;background:var(--paper) url(/assets/referendo/papel.webp) center/cover;color:var(--paper-ink);border-radius:3px;padding:22px 14px 24px;box-shadow:0 2px 0 #b99f74,0 26px 60px rgba(0,0,0,.6)}
.ref-cedula :focus-visible{outline-color:var(--paper-focus)}
.ref-cedula-topo{display:grid;gap:4px;text-align:center;border-bottom:3px double var(--paper-ink-2);padding-bottom:12px;margin-bottom:18px;font:italic 15px var(--font-title);color:var(--paper-ink-2)}
.ref-cedula-topo h3{font:700 21px/1.2 var(--font-title);letter-spacing:.18em;margin:0;color:var(--paper-ink)}
.ref-ops{display:grid;gap:14px;margin:0;padding:0;border:0}
.ref-op{position:relative;display:flex;flex-direction:column;background:rgba(255,248,230,.38);border:1px solid rgba(90,74,58,.55);border-radius:4px;padding:10px 10px 14px;cursor:pointer}
.ref-op input{position:absolute;opacity:0;pointer-events:none}
.ref-op figure{margin:0;height:190px;overflow:hidden;border-radius:2px;background:#e3d2ae}
.ref-op figure img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;mix-blend-mode:multiply}
.ref-num{position:absolute;top:174px;left:18px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0cd8a,#b88a45 70%,#7d5a26);color:var(--brass-ink);display:grid;place-items:center;font:700 21px var(--font-title);box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,240,200,.5)}
.ref-op h4{font:700 19px/1.22 var(--font-title);margin:28px 4px 8px}
.ref-op p{font-size:15px;line-height:1.45;color:var(--paper-ink-2);margin:0 4px}
.ref-marcar{display:flex;align-items:center;gap:10px;margin:14px 4px 0;font:600 15px var(--font-body);color:var(--paper-ink)}
.ref-quad{width:26px;height:26px;flex:none;border:2px solid var(--paper-ink);background:rgba(255,255,255,.35);position:relative}
.ref-op:has(input:checked){border:2px solid var(--carimbo);background:rgba(255,248,230,.6)}
.ref-op:has(input:checked) .ref-quad::before,.ref-op:has(input:checked) .ref-quad::after{content:"";position:absolute;left:50%;top:-4px;width:3px;height:32px;background:var(--carimbo);border-radius:2px}
.ref-op:has(input:checked) .ref-quad::before{transform:translateX(-50%) rotate(45deg)}
.ref-op:has(input:checked) .ref-quad::after{transform:translateX(-50%) rotate(-45deg)}
.ref-op:has(input:focus-visible){outline:3px solid var(--paper-focus);outline-offset:2px}
.ref-op:has(input:disabled){cursor:default}
.ref-carimbo{position:absolute;right:-4px;top:28px;width:136px;height:136px;border-radius:50%;border:4px solid var(--carimbo);color:var(--carimbo);display:grid;place-items:center;text-align:center;transform:rotate(-14deg);opacity:.86;box-shadow:inset 0 0 0 7px var(--carimbo);background:radial-gradient(circle,rgba(233,220,192,.6),rgba(233,220,192,.2));pointer-events:none}
.ref-carimbo b{display:block;font:700 24px/1 var(--font-title)}
.ref-carimbo small{display:block;font:700 10px/1.3 var(--font-body);letter-spacing:.14em;margin-top:3px}
.ref-garantia{display:flex;align-items:center;gap:12px;margin-top:20px;padding:12px 14px;border:2px solid var(--paper-ink);border-radius:3px;font:600 15px/1.4 var(--font-body);background:rgba(255,248,230,.4)}
.ref-escudo{width:28px;height:32px;flex:none;background:var(--paper-ink);clip-path:polygon(50% 0,100% 15%,100% 55%,50% 100%,0 55%,0 15%);display:grid;place-items:center;color:var(--paper);font:700 15px var(--font-body)}
.ref-cedula-acoes{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px;text-align:center}
.ref-cedula-acoes .ref-btn{width:100%;max-width:420px;min-height:64px;font-size:20px}
.ref-status{min-height:1.4em;font:600 15px/1.4 var(--font-body);color:var(--paper-ink)}
.ref-status.erro{color:var(--carimbo)}
.ref-cedula-acoes small{font-size:14px;color:var(--paper-ink-2)}
.ref-motivos{margin:0;padding:12px 16px;border:2px dashed var(--carimbo);border-radius:3px;font:600 15px/1.45 var(--font-body);color:var(--paper-ink);list-style:none;text-align:left}
.ref-motivos a,.ref-entrar-nota a{color:var(--carimbo);font-weight:700}
.ref-entrar-nota{max-width:420px;margin:0;padding:12px 16px;border:2px solid var(--paper-ink);border-radius:3px;background:rgba(255,248,230,.55);font:600 16px/1.45 var(--font-body);color:var(--paper-ink)}
.ref-cedula-acoes .ref-repetir{min-height:48px;color:var(--text)!important}

/* Edital e apuração */
.ref-mural2{margin-top:52px}
.ref-papel h3{font:400 27px/1.15 var(--font-title);text-align:center;margin:6px 0 12px;padding-bottom:10px;border-bottom:1px solid rgba(90,74,58,.45)}
.ref-papel .ref-eb{text-align:center}
.ref-regras{margin:0;padding:0;list-style:none;counter-reset:r}
.ref-regras li{counter-increment:r;display:flex;gap:12px;align-items:baseline;padding:6px 0;font:17px/1.4 var(--font-title)}
.ref-regras li::before{content:counter(r);font:700 12px var(--font-body);width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid var(--paper-ink-2);display:grid;place-items:center;transform:translateY(3px)}
.ref-apur>p{font:16px/1.45 var(--font-title);color:var(--paper-ink-2);text-align:center}
.ref-linha{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:14px;font:600 14px var(--font-body)}
.ref-linha i{font:italic 14px var(--font-title);color:var(--paper-ink-2);white-space:nowrap}
.ref-risco{height:12px;margin-top:5px;border:1.5px solid var(--paper-ink-2);border-radius:2px;background:repeating-linear-gradient(90deg,rgba(90,74,58,.18) 0 2px,transparent 2px 9px);overflow:hidden}
.ref-risco b{display:block;height:100%;width:0;background:var(--paper-ink);transition:width .4s ease}
.ref-lacre{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px!important;font:700 13px var(--font-body)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--carimbo)!important}
.ref-lacre::before{content:"";width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c0533c,#8e2f1f 60%,#5d1c11)}

.ref-aviso{display:flex;align-items:center;gap:14px;margin-top:36px;padding:16px 18px;border-radius:6px;background:linear-gradient(90deg,rgba(223,179,106,.14),rgba(223,179,106,.04));box-shadow:inset 0 0 0 1px rgba(223,179,106,.45);color:var(--text-2);font-size:15px}
.ref-aviso b{color:var(--text)}
.ref-aviso .ic{width:32px;height:32px;flex:none;border-radius:50%;border:2px solid var(--brass);display:grid;place-items:center;font:700 17px var(--font-title);color:var(--brass-hi)}
.ref-pe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;max-width:1160px;margin:0 auto;padding:22px 16px 28px;border-top:1px solid var(--line);color:var(--text-3);font-size:13px}

@media (min-width:700px){
  .ref-hero{min-height:760px}
  .ref-hero h1{font-size:56px}
  .ref-lede{font-size:19px}
  .ref-mural{padding:44px 40px 40px}
  .ref-mural-grid{grid-template-columns:1.25fr 1fr;gap:40px}
  .ref-papel{padding:34px 32px 28px}
  .ref-bilhete{transform:rotate(-1.2deg)}
  .ref-selo{width:140px;height:140px}.ref-selo strong{font-size:38px}
  .ref-ops{grid-template-columns:repeat(2,1fr)}
  .ref-cedula{padding:32px 30px 32px}
  .ref-cedula-topo{grid-template-columns:1fr auto 1fr;text-align:left}
  .ref-cedula-topo .r{text-align:right}
  .ref-cedula-topo h3{font-size:25px}
  .ref-titulo h2{font-size:44px}
  .ref-mural2 .ref-mural-grid{grid-template-columns:1fr 1fr;align-items:start}
  .ref-papel.r1{transform:rotate(.9deg)}.ref-papel.r2{transform:rotate(-.7deg)}
}
@media (min-width:1100px){
  .ref-hero{min-height:900px}
  .ref-hero h1{font-size:72px}
  .ref-ops{grid-template-columns:repeat(4,1fr);align-items:start}
  .ref-op figure{height:230px}.ref-num{top:214px}.ref-carimbo{top:48px}
}
@media (prefers-reduced-motion:reduce){.ref-risco b{transition:none}}