/* Loterias Ribeirão das Neves — 21/10/2026. Tema CASA LOTÉRICA, profissional (toldo, letreiro, vitrine): azul do logo, laranja e ouro.
   Bricolage Grotesque (títulos) + Figtree (texto). */
:root {
  --navy: #06164a;
  --navy2: #0a2370;
  --royal: #1240c4;
  --blue: #1f5eff;
  --sky: #2a8cff;
  --aqua: #17b7e6;
  --sun: #ff8a1a;
  --sun2: #ffb03a;
  --gold: #f6c344;
  --ink: #0b1a44;
  --muted: #56658a;
  --line: #dbe5fb;
  --bg: #f3f7ff;
  --card: #ffffff;
  --ok: #12a464;
  --bad: #d23a3a;
  --r: 18px;
  --shadow: 0 18px 40px -18px rgba(8, 30, 100, .35);
  --hdr: 74px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 Figtree, "Segoe UI", Arial, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: "Bricolage Grotesque", Figtree, sans-serif; letter-spacing: -.02em; margin: 0; }
[hidden] { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.tiny { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--royal); }
.eyebrow svg { width: 16px; height: 16px; }
i[data-lucide], svg.lucide { width: 18px; height: 18px; flex: none; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; font-weight: 800; font-size: 15.5px; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn-sun { color: #fff; background: linear-gradient(180deg, #ffa23d, #ff7a00); box-shadow: 0 10px 24px -10px rgba(255, 122, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-sun:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(255, 122, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-glass { color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(255, 255, 255, .2); }
.btn-line { color: var(--royal); background: #fff; border: 1.5px solid #c9d7f8; }
.btn-line:hover { border-color: var(--royal); }
.btn-wa { color: #fff; background: #17a74a; }
.btn-full { width: 100%; }
.btn-mini { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--royal); font-weight: 700; font-size: 13.5px; }

/* ---------- 18+ ---------- */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: auto; background:
  radial-gradient(60% 50% at 50% 30%, rgba(42, 140, 255, .35), transparent 70%),
  repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px), linear-gradient(170deg, #04103a, #0a2370 60%, #0d3aa8); transition: opacity .35s; }
.gate-in { position: relative; display: grid; justify-items: center; gap: 18px; padding: 24px; width: min(540px, 100%); }
.gate-logo { width: min(260px, 58vw); padding: 18px 22px; border-radius: 28px; background: #fff; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.gate-card { width: 100%; padding: 24px 26px; border-radius: 22px; text-align: center; color: var(--ink); background: #fff; border-top: 5px solid var(--sun); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
.gate-card h2 { font-size: clamp(24px, 4vw, 30px); color: var(--navy); }
.gate-card p { margin: 8px 0 0; color: var(--muted); }
.gate-card .btn-glass { color: var(--royal); background: #eef3ff; border-color: #c9d7f8; }
.gate-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.gate-msg { margin-top: 14px !important; color: var(--bad) !important; font-weight: 700; }
.gate.out { opacity: 0; pointer-events: none; }
@keyframes boia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- cabeçalho + faixa de prêmios pagos ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(18, 64, 196, .1); transition: box-shadow .2s; }
.hdr.scrolled { box-shadow: 0 10px 30px -18px rgba(8, 30, 100, .45); }
.hdr-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: var(--hdr); display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { width: 58px; height: auto; }
.brand span { display: grid; line-height: 1.05; }
.brand b { font-family: "Bricolage Grotesque"; font-size: 15px; color: var(--royal); text-transform: uppercase; letter-spacing: .06em; }
.brand small { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 19px; color: var(--navy); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 9px 12px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14.5px; color: #33446e; transition: background .15s, color .15s; }
.nav a:hover { background: #eef3ff; color: var(--royal); }
.nav a.on { background: var(--royal); color: #fff; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: #fdecec; color: var(--bad); font-weight: 800; font-size: 13px; flex: none; }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.open { background: #e5f7ee; color: var(--ok); }
.status-pill.open i { animation: pulsa 1.6s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(18, 164, 100, .6); } 100% { box-shadow: 0 0 0 9px rgba(18, 164, 100, 0); } }
.hdr-wa { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 12px; background: #17a74a; color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; flex: none; }
.ticker { position: relative; overflow: hidden; height: 36px; background: linear-gradient(90deg, var(--navy), var(--royal) 50%, var(--navy)); color: #fff; font-size: 14px; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--navy), transparent); }
.ticker-run { display: flex; gap: 34px; width: max-content; height: 100%; align-items: center; padding-left: 20px; animation: corre var(--tk, 60s) linear infinite; }
.ticker:hover .ticker-run { animation-play-state: paused; }
.ticker-run span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ticker-run b { color: var(--gold); font-weight: 800; }
.ticker-run em { font-style: normal; color: #a9c2ff; }
.ticker-run .tk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- topo: a FACHADA da casa lotérica (foto de referência do dono) ---------- */
.loja { position: relative; overflow: hidden; background: #fbfcff; }
#hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.fachada { position: relative; background: linear-gradient(180deg, #0a3fb8, #0a35a0); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.fachada::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 40%); pointer-events: none; }
.fachada-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fach-logo { width: 190px; height: auto; filter: drop-shadow(0 0 18px rgba(140, 200, 255, .55)) drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); transition: transform .25s ease-out; }
.fach-marca { display: flex; align-items: center; gap: 14px; color: #fff; }
.fach-marca svg { width: 74px; height: 74px; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .45)); }
.fach-marca b { display: block; font-family: "Bricolage Grotesque"; font-size: clamp(34px, 4.6vw, 58px); line-height: 1; letter-spacing: -.01em; text-shadow: 0 0 18px rgba(255, 255, 255, .35); }
.fach-marca small { display: block; margin-top: 4px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; color: #cfe0ff; }
.faixa-nome { background: #0b2f8f; border-top: 1px solid rgba(255, 255, 255, .15); }
.faixa-in { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #fff; }
.faixa-in b { font-family: "Bricolage Grotesque"; font-size: 20px; letter-spacing: .01em; }
.faixa-in span { color: #cfe0ff; font-weight: 700; }
/* placas de prêmio: cabeçalho na cor do jogo + números em plaquinhas brancas */
.placar { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; transform: translateY(-1px); }
.placa { display: grid; text-decoration: none; color: var(--navy); background: #f2f4f8; border: 3px solid var(--c); border-top: 0; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .5); cursor: pointer; transition: transform .2s; }
.placa:hover { transform: translateY(2px); }
.placa-hd { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 8px; background: var(--c); color: #fff; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; }
.placa-hd svg { width: 20px; height: 20px; }
.placa-bd { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 8px 10px; }
.dig { display: grid; place-items: center; min-width: 30px; height: 46px; padding: 0 2px; border-radius: 4px; background: #fff; border: 1px solid #cfd6e4; box-shadow: inset 0 -3px 0 #e5e9f2; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 36px; line-height: 1; color: #1a2a6c; font-variant-numeric: tabular-nums; animation: vira .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
.dig.virg { min-width: 12px; background: none; border: 0; box-shadow: none; padding: 0; }
@keyframes vira { from { transform: rotateX(90deg); opacity: 0; } }
.placa-un { margin-left: 4px; padding: 6px 8px; border-radius: 4px; background: #fff; border: 1px solid #cfd6e4; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 24px; color: #1a2a6c; }
.placa-sub { padding: 0 8px 8px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* varal de bandeirinhas */
.varal { position: relative; z-index: 2; height: 64px; margin-top: -2px; display: flex; justify-content: center; gap: 0; overflow: hidden; pointer-events: none; }
.varal::before { content: ""; position: absolute; left: -2%; right: -2%; top: 4px; height: 30px; border-top: 2px solid rgba(26, 42, 108, .35); border-radius: 50% 50% 0 0 / 30px 30px 0 0; transform: scaleY(-1); transform-origin: top; }
.band { flex: none; width: 58px; height: 54px; margin: 0 6px; display: grid; justify-items: center; padding-top: 8px; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); color: #fff; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 10px; line-height: 1.05; text-align: center; transform-origin: 50% 0; transform: translateY(var(--y, 0)); animation: balanca 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.band:nth-child(3n+1) { background: #2b2b8e; }
.band:nth-child(3n+2) { background: #ff8a1a; }
.band:nth-child(3n) { background: #1240c4; }
.band svg { width: 16px; height: 16px; margin-bottom: 2px; }
@keyframes balanca { 0%, 100% { transform: translateY(var(--y, 0)) rotate(-3deg); } 50% { transform: translateY(var(--y, 0)) rotate(3deg); } }
/* o salão: parede branca com azulejo embaixo, texto e os guichês */
.salao { position: relative; background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 62%, transparent 62%), repeating-linear-gradient(90deg, #e9edf5 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, #e9edf5 0 1px, #f7f8fc 1px 22px); }
.hero-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 34px 24px 26px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.loja .eyebrow { color: var(--royal); }
.loja h1 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.03; font-weight: 800; color: var(--navy); }
.loja h1 em { font-style: normal; color: var(--sun); }
.lead { font-size: 18px; color: #3d4c74; max-width: 560px; margin: 16px 0 0; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.guiches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 12px 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #d9dee8, #c9d0dd); box-shadow: inset 0 2px 0 #fff, 0 20px 30px -24px rgba(0, 0, 0, .6); }
.guiche { display: grid; gap: 6px; text-decoration: none; color: var(--navy); transition: transform .2s; }
.guiche:hover { transform: translateY(-3px); }
.g-placa { justify-self: center; padding: 4px 10px; border-radius: 4px; background: var(--g); color: #fff; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .5); white-space: nowrap; }
.g-vidro { position: relative; display: grid; align-content: center; gap: 2px; min-height: 128px; padding: 22px 10px 12px; border-radius: 6px 6px 0 0; text-align: center; background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(226, 236, 250, .9) 55%, rgba(205, 220, 242, .9)); border: 5px solid #eef1f6; border-bottom: 0; box-shadow: inset 0 0 0 1px #b9c3d4; overflow: hidden; }
.g-vidro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .8) 42%, transparent 52%); transform: translateX(-120%); animation: reflexo 6s ease-in-out infinite; }
.guiche:nth-child(2) .g-vidro::after { animation-delay: 2s; }
.guiche:nth-child(3) .g-vidro::after { animation-delay: 4s; }
@keyframes reflexo { 35%, 100% { transform: translateX(120%); } }
.g-num { position: absolute; top: 6px; left: 8px; padding: 1px 6px; border-radius: 4px; background: #1a2a6c; color: #fff; font-weight: 800; font-size: 12px; }
.g-vidro b { font-family: "Bricolage Grotesque"; font-size: 23px; line-height: 1.05; color: var(--navy); font-variant-numeric: tabular-nums; }
.g-vidro small { font-size: 12.5px; color: #4a5a80; font-weight: 600; line-height: 1.25; }
.g-balcao { height: 16px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #f3f5f9, #b8c1d1); box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .5); }
.piso { position: relative; height: 34px; background: linear-gradient(180deg, #e3e6ec, #d4d8e0); }
.piso span { position: absolute; left: 50%; top: 0; bottom: 0; width: 34px; transform: translateX(-50%); background: repeating-linear-gradient(90deg, #2f63d8 0 4px, #3d72e6 4px 8px); }
.piso::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, #2f63d8 0 4px, #3d72e6 4px 8px); }

/* ---------- seções ---------- */
main > section { scroll-margin-top: 108px; }
.sec { padding: 78px 0; }
.sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.sec-hd h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.04; color: var(--navy); }
.sec-sub { margin: 10px 0 0; color: var(--muted); max-width: 680px; font-size: 16.5px; }
.note { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: var(--muted); font-size: 14px; }
.sync { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: #33446e; }
.sync .live { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); animation: pulsa 1.6s infinite; }
.sync.off { color: var(--muted); }

/* vitrine dos bolões: painel marinho */
.boloes { background: linear-gradient(180deg, #06164a, #0a2370); color: #fff; }
.boloes .sec-hd h2 { color: #fff; }
.boloes .eyebrow { color: var(--gold); }
.boloes .sec-sub, .boloes .note { color: #b8c9f5; }
.boloes .sync { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #e4ecff; }
.boloes .btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.tiles { display: flex; gap: 12px; overflow-x: auto; padding: 12px 4px 14px; scroll-snap-type: x proximity; scrollbar-color: var(--gold) rgba(255, 255, 255, .08); scrollbar-width: thin; }
.tiles::-webkit-scrollbar { height: 8px; }
.tiles::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); border-radius: 8px; }
.tiles::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #c98a12, var(--gold)); border-radius: 8px; }
.tile { position: relative; flex: none; display: grid; place-items: center; width: 186px; height: 78px; padding: 8px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; scroll-snap-align: start; transition: border-color .15s, transform .15s, background .15s; }
.tile:hover { transform: translateY(-2px); border-color: rgba(246, 195, 68, .6); }
.tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.tile-all { width: 120px; display: flex; gap: 8px; font-weight: 800; font-size: 15px; }
.tile-n { position: absolute; top: -9px; right: 10px; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center; background: linear-gradient(180deg, #ffd36b, #e0a21a); color: #3a2000; font-weight: 800; font-size: 12px; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.tile.on { border-color: var(--gold); background: rgba(246, 195, 68, .12); box-shadow: 0 0 0 1px var(--gold), 0 10px 24px -12px rgba(246, 195, 68, .7); }
.tile:not(.on):not(.tile-all) img { filter: saturate(.85); }
.medida { flex: 1 1 420px; padding: 14px 18px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); }
.medida label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: #dbe6ff; }
.medida label b { color: var(--gold); font-weight: 800; }
.medida input { width: 100%; margin: 14px 0 0; height: 22px; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
.medida input::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--gold) var(--pct, 100%), rgba(255, 255, 255, .15) var(--pct, 100%)); }
.medida input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: var(--gold); border: 3px solid #fff3c8; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.medida input::-moz-range-track { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .15); }
.medida input::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--gold); }
.medida input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid #fff3c8; }
.ordenar { display: grid; gap: 8px; align-content: end; }
.ordenar label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #b8c9f5; }
.ordenar select { min-height: 50px; min-width: 210px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .25); background: #0d1d55; color: #fff; font: 700 15px Figtree, sans-serif; cursor: pointer; }
.boloes .count { display: block; margin: 4px 0 0; color: #b8c9f5; }

/* chips e filtros */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; color: #2b3b66; font-weight: 700; font-size: 14px; transition: all .15s; }
.chip:hover { border-color: var(--c, var(--royal)); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--royal)); }
.chip small { padding: 1px 7px; border-radius: 99px; background: #eef3ff; font-weight: 800; font-size: 12px; }
.chip.on { background: var(--c, var(--royal)); border-color: var(--c, var(--royal)); color: #fff; }
.chip.on .dot { background: #fff; }
.chip.on small { background: rgba(255, 255, 255, .25); }
.filters { display: grid; gap: 12px; margin: 6px 0 24px; }
.filters-row { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.sel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line); color: var(--royal); }
.sel select { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink); padding: 8px 2px; outline: none; cursor: pointer; }
.count { margin-left: auto; font-weight: 700; color: var(--muted); font-size: 14px; }

/* ---------- bolão destaque ---------- */
.vip { position: relative; overflow: hidden; display: grid; grid-template-columns: 300px 1fr auto; gap: 26px; align-items: center; padding: 22px; margin-bottom: 26px; border-radius: 24px; color: #fff; background: radial-gradient(70% 120% at 0% 0%, rgba(42, 140, 255, .5), transparent 60%), linear-gradient(130deg, #06164a, #0b2f9c 60%, #0a2370); box-shadow: 0 30px 60px -30px rgba(6, 22, 74, .8); isolation: isolate; }
.vip::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 26px; padding: 2px; background: conic-gradient(from var(--vang, 0deg), #ffd36b, #ff7a00, #2a8cff, #ffd36b); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vgira 6s linear infinite; }
@property --vang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes vgira { to { --vang: 360deg; } }
.vip-art { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 720 / 248; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .7); }
.vip-art img { width: 100%; height: 100%; object-fit: cover; }
.vip-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: linear-gradient(90deg, #ffd36b, #ff9a1f); color: #3a2000; font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.vip h3 { font-size: clamp(22px, 2.6vw, 30px); margin: 10px 0 4px; }
.vip-prize { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); line-height: 1; color: var(--gold); }
.vip-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; color: #cfdcff; font-size: 14.5px; }
.vip-meta span { display: inline-flex; align-items: center; gap: 6px; }
.vip-buy { display: grid; gap: 8px; justify-items: end; text-align: right; }
.vip-buy small { display: block; color: #cfdcff; }
.vip-buy b { font-family: "Bricolage Grotesque"; font-size: 34px; line-height: 1; }

/* ---------- cartão do bolão: nível da água = % vendido ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.pool { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; opacity: 0; transform: translateY(14px); animation: entra .5s ease forwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes entra { to { opacity: 1; transform: none; } }
.pool:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -20px rgba(8, 30, 100, .45); }
.pool-art { position: relative; aspect-ratio: 720 / 248; background: var(--c); }
.pool-art img { width: 100%; height: 100%; object-fit: cover; }
.pool-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--ink); font-weight: 800; font-size: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.pool-badge.hot { background: var(--sun); color: #fff; }
.pool-badge.today { background: #e8263b; color: #fff; }
.pool-body { position: relative; padding: 14px 16px 16px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; flex: 1; z-index: 1; }
.pool-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pool-name { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 19px; color: var(--c); }
.pool-conc { font-size: 13px; color: var(--muted); font-weight: 700; }
.pool-prize small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.pool-prize b { font-family: "Bricolage Grotesque"; font-size: 28px; line-height: 1.05; color: var(--navy); }
.pool-when { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #33446e; }
.pool-when .cdn { margin-left: auto; padding: 2px 8px; border-radius: 8px; background: #fff3e6; color: #c35d00; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pool-facts { display: flex; gap: 6px; flex-wrap: wrap; }
.pool-facts span { padding: 4px 9px; border-radius: 8px; background: #f1f5ff; font-size: 12.5px; font-weight: 700; color: #33446e; }
.pool-chance { font-size: 13px; color: var(--muted); line-height: 1.35; }
.pool-chance b { color: var(--royal); }
.sold { display: grid; gap: 6px; }
.sold-txt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: #33446e; }
.sold-txt b { color: var(--navy); }
.sold-bar { height: 8px; border-radius: 8px; background: #e6edfb; overflow: hidden; }
.sold-bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--blue), var(--royal)); transition: width 1.2s cubic-bezier(.3, .8, .3, 1); }
.sold.quase .sold-bar i { background: linear-gradient(90deg, var(--sun2), var(--sun)); }
/* dono 21/10: o botão não pode cortar "CAIXA" -> quando não cabe ao lado do preço, desce e ocupa a linha toda */
.pool-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.pool-price small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.pool-price b { font-family: "Bricolage Grotesque"; font-size: 26px; color: var(--ink); line-height: 1; }
.pool-buy .btn { flex: 1 0 auto; min-height: 44px; padding: 0 16px; }
.pool-price b.price-caixa { font-family: Figtree; font-size: 15px; color: var(--royal); }
.empty { grid-column: 1 / -1; padding: 40px 20px; text-align: center; border-radius: var(--r); background: #fff; border: 1px dashed #c9d7f8; color: var(--muted); }
.empty b { display: block; color: var(--navy); font-size: 18px; margin-bottom: 6px; }
.more { display: flex; justify-content: center; margin-top: 22px; }

/* ---------- janela dos prêmios pagos ---------- */
.premios { background: linear-gradient(180deg, var(--bg), #e6eeff); }
.janela { position: relative; display: grid; grid-template-columns: 360px 1fr; gap: 0; border-radius: 28px; overflow: hidden; background: linear-gradient(150deg, #06164a, #0a2370 60%, #0d3aa8); color: #fff; box-shadow: 0 40px 80px -40px rgba(6, 22, 74, .9); padding: 14px; }
.jan-frame { position: absolute; inset: 0; pointer-events: none; border-radius: 28px; border: 3px solid transparent; background: linear-gradient(135deg, #ffd36b, #c98a12, #ffe39a, #b07408) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.jan-side { padding: 22px 22px 18px; display: grid; align-content: start; gap: 6px; }
.jan-lbl { margin: 0; color: var(--gold); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; }
.jan-total { margin: 0; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: clamp(36px, 4vw, 50px); line-height: 1.02; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff3c8, #f6c344 60%, #d99a14); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 14px rgba(246, 195, 68, .35)); }
.jan-sub { margin: 0; color: #b8c9f5; font-size: 14px; }
.jan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.jan-stats div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.jan-stats b { display: block; white-space: nowrap; font-family: "Bricolage Grotesque"; font-size: 16px; line-height: 1.1; }
.jan-stats small { color: #b8c9f5; font-size: 12px; }
.chips-dark .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; min-height: 34px; font-size: 13px; padding: 0 11px; }
.chips-dark .chip small { background: rgba(255, 255, 255, .15); }
.chips-dark .chip.on { background: var(--c, var(--sun)); border-color: var(--c, var(--sun)); }
.jan-glass { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 0 40px rgba(0, 0, 0, .25); }
.jan-list { height: 470px; overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; -webkit-mask: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 24px), transparent); mask: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 24px), transparent); }
.jan-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .08) 45%, transparent 55%); }
.pg { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.pg.novo { animation: pg-entra .6s ease; }
@keyframes pg-entra { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.pg-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--c); color: #fff; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 13px; text-align: center; line-height: 1.05; box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .2); }
.pg-ic svg { width: 26px; height: 26px; }
.pg-txt b { display: block; font-size: 15.5px; }
.pg-txt small { display: block; color: #b8c9f5; font-size: 13px; }
.pg-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(246, 195, 68, .2); color: var(--gold); font-size: 11.5px; font-weight: 800; vertical-align: 2px; }
.pg-val { text-align: right; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 20px; color: var(--gold); white-space: nowrap; }
.pg-val small { display: block; font-family: Figtree; font-weight: 600; font-size: 12px; color: #b8c9f5; }
.jan-empty { padding: 30px; text-align: center; color: #b8c9f5; }

/* ---------- acumulados: cachoeira ---------- */
.acum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-flow: dense; gap: 16px; align-items: start; }
.ac { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 0 0 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; color: var(--ink); transition: transform .2s; }
.ac:hover { transform: translateY(-4px); }
.ac.big { grid-column: span 2; grid-row: span 2; align-content: start; background: linear-gradient(140deg, var(--navy), var(--royal)); color: #fff; border: 0; }
.ac-art { aspect-ratio: 720 / 248; background: var(--c); }
.ac-art img { width: 100%; height: 100%; object-fit: cover; }
.ac > :not(.ac-art):not(.ac-fall) { padding: 0 16px; }
.ac-name { font-weight: 800; color: var(--c); font-size: 15px; }
.ac.big .ac-name { color: var(--gold); }
.ac-val { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 28px; line-height: 1; }
.ac.big .ac-val { font-size: clamp(34px, 4vw, 48px); }
.ac-when { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.ac.big .ac-when { color: #cfdcff; }
.ac-pools { font-size: 13px; font-weight: 800; color: var(--royal); }
.ac.big .ac-pools { color: #fff; }
.ac-tag { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 99px; background: #e8263b; color: #fff; font-weight: 800; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; z-index: 1; }
.ac-fall { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ac-fall i { position: absolute; top: -20%; width: 2px; height: 30%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55), transparent); animation: queda linear infinite; }
@keyframes queda { to { transform: translateY(480%); } }

/* ---------- resultados + conferidor ---------- */
/* botões 3D das modalidades (arte do dono) e o globo do estúdio de sorteio */
.botoes-jogo { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.bj { padding: 0; border: 0; background: none; border-radius: 99px; transition: transform .18s, filter .18s, opacity .18s; opacity: .78; filter: saturate(.8); }
.bj img { height: 54px; width: auto; }
.bj:hover { opacity: 1; filter: none; transform: translateY(-2px); }
.bj.on { opacity: 1; filter: drop-shadow(0 0 10px rgba(246, 195, 68, .9)) drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); transform: scale(1.07); }
.bj:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; }
.res-box { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-top: 18px; }
.res-head canvas { width: 200px; height: 264px; flex: none; }
.ball { animation-delay: calc(var(--base, 0s) + var(--i) * 90ms) !important; }
.res-card, .conf { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.res-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.res-head img { width: 180px; border-radius: 12px; }
.res-head h3 { font-size: 24px; color: var(--c); }
.res-head p { margin: 2px 0 0; color: var(--muted); font-weight: 600; }
.balls { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px; }
.ball { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 18px; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), transparent 40%), var(--c); box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .25), 0 6px 14px -6px rgba(0, 0, 0, .4); transform: scale(0); animation: bola .45s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(var(--i) * 90ms); }
.ball.hit { outline: 3px solid var(--gold); outline-offset: 2px; }
@keyframes bola { to { transform: scale(1); } }
.res-sub { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 12px; }
.res-faixa { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f3f7ff; font-weight: 700; }
.res-faixa b { color: var(--royal); }
.res-next { margin-top: 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; font-weight: 700; color: #33446e; }
.res-next b { font-family: "Bricolage Grotesque"; font-size: 22px; color: var(--navy); }
.res-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; }
.res-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f6f9ff; }
.conf-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.conf-hd b { font-family: "Bricolage Grotesque"; font-size: 20px; color: var(--navy); }
.conf-btns { display: flex; gap: 6px; }
.conf-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.cn { aspect-ratio: 1; border-radius: 9px; border: 1.5px solid #d5e0f8; background: #fff; color: #33446e; font-weight: 800; font-size: 13px; display: grid; place-items: center; padding: 0; transition: transform .12s, background .15s; }
.cn:hover { border-color: var(--c); }
.cn.on { background: var(--c); border-color: var(--c); color: #fff; transform: scale(1.06); }
.cn.on.hit { background: linear-gradient(180deg, #ffd36b, #ff9a1f); border-color: #ff9a1f; color: #3a2000; box-shadow: 0 0 0 3px rgba(255, 154, 31, .3); }
.cn.sorteada:not(.on) { border-color: var(--c); border-style: dashed; }
.conf-msg { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #f3f7ff; font-weight: 700; }
.conf-msg.win { background: linear-gradient(90deg, #fff4d6, #ffe2b8); color: #7a3d00; }
.conf-na { color: var(--muted); }

/* ---------- Virada ---------- */
.virada { position: relative; overflow: hidden; color: #fff; text-align: center; min-height: 640px; display: grid; place-items: center; background: linear-gradient(180deg, #020717 0%, #061347 55%, #0a2370 100%); }
#virada-cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.virada-in { position: relative; z-index: 1; max-width: 760px; padding: 70px 24px 230px; pointer-events: none; }
.virada-in > * { pointer-events: auto; }
.virada .eyebrow { color: var(--gold); }
.virada h2 { font-size: clamp(32px, 5vw, 58px); line-height: 1.02; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.virada .lead { margin: 14px auto 0; }
.cd { display: flex; justify-content: center; gap: 10px; margin: 26px 0; }
.cd div { min-width: 82px; padding: 12px 8px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(246, 195, 68, .4); backdrop-filter: blur(4px); }
.cd b { display: block; font-family: "Bricolage Grotesque"; font-size: 40px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.cd small { color: #cfdcff; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
.virada .tiny { color: #9fb4ea; }

/* ---------- QR ---------- */
.qr-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.qr-txt h2 { font-size: clamp(30px, 4vw, 46px); color: var(--navy); line-height: 1.04; }
.qr-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.qr-card { position: relative; justify-self: center; width: min(340px, 100%); padding: 22px 22px 18px; border-radius: 28px; text-align: center; background: linear-gradient(160deg, #fff, #eef4ff); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(8, 30, 100, .55); overflow: hidden; }
.qr-card::before { content: ""; position: absolute; inset: 0; border-radius: 28px; padding: 3px; background: linear-gradient(135deg, var(--blue), var(--sun), var(--gold)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.qr-code { position: relative; aspect-ratio: 1; border-radius: 16px; background: #fff; padding: 10px; }
.qr-code canvas, .qr-code img { width: 100%; height: 100%; image-rendering: pixelated; }
.qr-code .qr-logo { position: absolute; left: 50%; top: 50%; width: 26%; height: auto; transform: translate(-50%, -50%); padding: 4px; border-radius: 14px; background: #fff; image-rendering: auto; }
.qr-scan { position: absolute; left: 22px; right: 22px; top: 22px; height: 3px; z-index: 2; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--sun), transparent); box-shadow: 0 0 18px var(--sun); animation: scan 3s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translateY(6px); opacity: 0; } 15%, 85% { opacity: 1; } 50% { transform: translateY(290px); } }
.qr-card p { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.qr-card p b { display: block; font-family: "Bricolage Grotesque"; font-size: 22px; color: var(--navy); }

/* ---------- atendimento ---------- */
.atend { background: linear-gradient(180deg, var(--bg), #e6eeff); }
.atend-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; }
.at-card { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 14px; align-content: start; }
.at-card h3 { display: flex; align-items: center; gap: 8px; font-size: 22px; color: var(--navy); }
.open-now { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #fdecec; }
.open-now > i { width: 14px; height: 14px; border-radius: 50%; background: var(--bad); flex: none; }
.open-now.open { background: #e5f7ee; }
.open-now.open > i { background: var(--ok); animation: pulsa 1.6s infinite; }
.open-now b { display: block; font-family: "Bricolage Grotesque"; font-size: 22px; }
.open-now small { color: var(--muted); font-weight: 600; }
.hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hours li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; font-weight: 600; }
.hours li.today { background: #eef3ff; color: var(--royal); font-weight: 800; }
.hours li.off span:last-child { color: var(--muted); }
.at-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pontos li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: #f6f9ff; border: 1px solid #e3ebfb; }
.pontos .pin { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(140deg, var(--blue), var(--royal)); color: #fff; font-family: "Bricolage Grotesque"; font-weight: 800; }
.pontos li:nth-child(2) .pin { background: linear-gradient(140deg, var(--sun2), var(--sun)); }
.pontos li:nth-child(3) .pin { background: linear-gradient(140deg, var(--aqua), #0b7fb8); }
.pontos li:nth-child(4) .pin { background: linear-gradient(140deg, var(--gold), #c98a12); }
.pontos b { display: block; font-size: 15px; }
.pontos small { color: var(--muted); }
.pontos a { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 13.5px; color: var(--royal); text-decoration: none; white-space: nowrap; }
.map { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.map iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ---------- rodapé ---------- */
.foot { background: var(--navy); color: #cfdcff; padding: 50px 0 110px; }
.foot-in { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 30px; }
.foot-logo { display: inline-block; padding: 12px 16px; border-radius: 18px; background: #fff; }
.foot-logo img { width: 150px; }
.foot-brand p { margin: 14px 0 0; font-size: 14px; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; align-content: start; }
.foot-links a { color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px; }
.foot-links a:hover { color: var(--gold); }
.foot-legal p { margin: 0 0 10px; font-size: 13.5px; }
.foot-legal b { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 6px; border-radius: 50%; border: 2px solid var(--sun); color: var(--sun); font-size: 12px; }
.foot-credit img { width: 160px; border-radius: 12px; border: 1px solid rgba(246, 195, 68, .5); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); margin-top: 6px; }

/* ---------- barra do celular, modal, aviso ---------- */
.dock { display: none; }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.modal-bg { position: absolute; inset: 0; background: rgba(4, 12, 40, .6); backdrop-filter: blur(4px); }
.modal-box { position: relative; width: min(500px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); animation: entra .3s ease forwards; opacity: 0; transform: translateY(14px); }
.modal-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: #f1f5ff; display: grid; place-items: center; color: var(--ink); }
.guide-top { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: linear-gradient(140deg, var(--c, var(--royal)), var(--navy)); color: #fff; margin: 8px 0 16px; }
.guide-top b { font-family: "Bricolage Grotesque"; font-size: 22px; }
.guide-top span { color: #dbe6ff; font-size: 14px; }
.modal h3 { font-size: 22px; color: var(--navy); }
.steps { margin: 12px 0 18px; padding-left: 20px; display: grid; gap: 10px; }
.steps li::marker { color: var(--sun); font-weight: 800; }
.toast { position: fixed; left: 50%; bottom: 90px; z-index: 95; transform: translateX(-50%); padding: 12px 18px; border-radius: 14px; background: var(--navy); color: #fff; font-weight: 700; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .5); max-width: calc(100% - 32px); }

/* ---------- celular e tablet ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .status-pill { margin-left: auto; }
  .hero-in { grid-template-columns: 1fr; padding-top: 40px; }
  .placar { grid-template-columns: repeat(2, 1fr); }
  .janela { grid-template-columns: 1fr; }
  .vip { grid-template-columns: 220px 1fr; }
  .vip-buy { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; text-align: left; }
  .res-box, .atend-grid { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  :root { --hdr: 62px; }
  main > section { scroll-margin-top: 96px; }
  .wrap, .hdr-in { padding: 0 16px; }
  .brand img { width: 46px; }
  .brand small { font-size: 16px; }
  .hdr-wa span { display: none; }
  .hdr-wa { padding: 0 11px; }
  .status-pill span { display: none; }
  .hero-in { padding: 18px 16px 24px; gap: 22px; }
  .hero h1 { font-size: 46px; }
  .lead { font-size: 16.5px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-facts { grid-template-columns: 1fr; }
  .hf { flex-direction: row; align-items: center; }
  .hf b { font-size: 21px; }
  .fachada-in { padding: 12px 16px; gap: 10px; }
  .fach-logo { width: 112px; }
  .fach-marca { gap: 8px; }
  .fach-marca svg { width: 40px; height: 40px; }
  .fach-marca b { font-size: 27px; }
  .fach-marca small { font-size: 10px; letter-spacing: .1em; }
  .faixa-in { padding: 8px 16px; }
  .faixa-in b { font-size: 16px; }
  .faixa-in span { font-size: 13px; }
  .placar { padding: 0 10px; gap: 6px; }
  .placa-hd { font-size: 13px; padding: 5px 4px; gap: 5px; }
  .placa-hd svg { width: 15px; height: 15px; }
  .placa-bd { gap: 2px; padding: 6px 4px 8px; }
  .dig { min-width: 21px; height: 34px; font-size: 25px; }
  .placa-un { font-size: 15px; padding: 4px 5px; margin-left: 2px; }
  .varal { height: 52px; }
  .band { width: 44px; height: 44px; margin: 0 4px; font-size: 8px; }
  .guiches { gap: 6px; padding: 10px 8px 0; }
  .g-placa { font-size: 10px; padding: 3px 6px; }
  .g-vidro { min-height: 104px; padding: 22px 4px 8px; border-width: 3px; }
  .g-vidro b { font-size: 17px; }
  .g-vidro small { font-size: 11px; }
  .tile { width: 150px; height: 64px; }
  .tile-all { width: 104px; }
  .ordenar { flex: 1 1 100%; }
  .ordenar select { width: 100%; }
  .sec { padding: 56px 0; }
  .vip { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .vip-buy { grid-template-columns: 1fr; }
  .vip-buy .btn { width: 100%; }
  .count { margin-left: 0; width: 100%; }
  .sel { flex: 1 1 160px; }
  .sel select { width: 100%; }
  .grid { grid-template-columns: 1fr; }
  .janela { padding: 8px; border-radius: 22px; }
  .jan-side { padding: 16px 12px 10px; }
  .jan-list { height: 440px; padding: 10px; }
  .pg { grid-template-columns: 44px 1fr; gap: 10px; padding: 10px; }
  .pg-ic { width: 44px; height: 44px; font-size: 11px; }
  .pg-val { grid-column: 2; text-align: left; font-size: 19px; }
  .pg-val small { display: inline; margin-left: 6px; }
  .ac.big { grid-column: auto; grid-row: auto; }
  .res-head { flex-wrap: nowrap; gap: 8px; }
  .res-head canvas { width: 128px; height: 169px; }
  .res-head h3 { font-size: 19px; }
  .botoes-jogo { flex-wrap: nowrap; overflow-x: auto; padding: 6px 4px 10px; scrollbar-width: thin; }
  .bj { flex: none; }
  .bj img { height: 46px; }
  .ball { width: 40px; height: 40px; font-size: 16px; }
  .conf-grid { gap: 4px; }
  .cn { font-size: 12px; border-radius: 7px; }
  .cd div { min-width: 66px; }
  .cd b { font-size: 30px; }
  .virada { min-height: 600px; }
  .virada-in { padding-bottom: 180px; }
  .qr-in { grid-template-columns: 1fr; gap: 26px; }
  .qr-btns .btn { flex: 1 1 100%; }
  .pontos li { grid-template-columns: 36px 1fr; }
  .pontos li a { grid-column: 2; }
  .foot-in { grid-template-columns: 1fr; }
  .dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 20px; background: rgba(6, 22, 74, .94); backdrop-filter: blur(10px); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .5); }
  .dock a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 14px; color: #b8c9f5; text-decoration: none; font-size: 11px; font-weight: 700; }
  .dock a.on { background: rgba(255, 255, 255, .12); color: #fff; }
  .dock a:last-child { color: #5fe08d; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .hdr, .dock, .gate, .virada, .toast { display: none !important; }
}

/* ---------- RESULTADOS E PRÊMIOS: quadro com um cartão por loteria (referência do dono) ---------- */
/* faixa do título = recorte da arte do dono (tools/recorta_quadro.py); o selo da direita é o nosso logo, por cima do fim da faixa */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.banner-res { position: relative; display: flex; align-items: center; padding-right: 9%; }
.banner-arte { width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(6, 22, 74, .35)); }
.banner-logo { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 15%; aspect-ratio: 1.35; border-radius: 999px; background: radial-gradient(circle at 50% 30%, #ffffff, #e9efff); box-shadow: 0 0 0 4px #d9a414, 0 0 0 7px #fff1b8, 0 0 0 9px #b07408, 0 14px 22px -10px rgba(0, 0, 0, .5); }
.banner-logo img { width: 74%; }
.banner-sub { margin: 16px 0 22px; }
.quadro { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; align-items: start; }
.qc { position: relative; border-radius: 18px; padding: 4px; background: linear-gradient(145deg, #ffe39a, #c98a12 30%, #fff1b8 55%, #b07408); box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .5); }
.qc-in { border-radius: 14px; overflow: hidden; background: linear-gradient(170deg, color-mix(in srgb, var(--c) 92%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 70%, #000)); color: #fff; }
.qc-cab { display: block; width: 100%; height: auto; margin-bottom: -6px; }
.qc-hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); border-bottom: 1px solid rgba(255, 255, 255, .25); }
.qc-hd svg { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.qc-hd b { font-family: "Bricolage Grotesque"; font-size: 23px; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.qc-bd { padding: 10px 12px 12px; display: grid; gap: 7px; }
.qc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qc-lbl { display: block; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .9); margin-bottom: 3px; }
.qc-campo { display: block; min-height: 26px; padding: 4px 8px; border-radius: 6px; background: #fff; color: #11204f; font-weight: 800; font-size: 13.5px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-dz { display: flex; flex-wrap: wrap; gap: 4px; }
.qc-dz span { display: grid; place-items: center; min-width: 30px; height: 28px; padding: 0 3px; border-radius: 5px; background: #fff; color: #11204f; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 15px; box-shadow: inset 0 -2px 0 #dfe4ee; }
.qc-dz.mini span { min-width: 25px; height: 24px; font-size: 13px; }
.qc-dz.trevos span { color: #b07408; }
.qc-fx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; }
.qc-fx > span:first-child { padding: 3px 6px; border-radius: 5px; background: rgba(0, 0, 0, .14); }
.qc-fx .qc-campo { font-size: 12.5px; min-height: 24px; padding: 3px 7px; }
.qc-fx .qc-campo small { font-weight: 600; color: #5a6a8e; }
.qc-fx .qc-campo.acum { color: #c35d00; }
.qc-arr { margin-top: 3px; }
.qc-jogo { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; align-items: center; font-size: 11.5px; font-weight: 700; }
.qc-jogo > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-jogo > span:nth-child(2) { text-align: right; }
.qc-jogo b { padding: 1px 6px; border-radius: 4px; background: #fff; color: #11204f; }
.qc-jogo i { font-style: normal; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #fff; color: #11204f; font-size: 10.5px; }
.estudio-hd { margin: 46px 0 16px; }
.estudio-hd h3 { font-size: clamp(26px, 3.4vw, 38px); color: var(--navy); }
.vd-reserva { margin: 0 0 18px; font-weight: 700; color: #e4ecff; }
.vd-reserva b { color: var(--gold); font-family: "Bricolage Grotesque"; font-size: 1.25em; }

/* ---------- EXPOSITOR DE VOLANTES (próximos prêmios) ---------- */
.expositor { position: relative; display: flex; gap: 12px; overflow-x: auto; padding: 8px 4px 34px; scrollbar-width: thin; scrollbar-color: var(--royal) transparent; }
.ex { position: relative; flex: none; width: 146px; padding: 0; border: 0; background: none; text-align: center; color: #fff; transition: transform .2s; }
.ex:hover { transform: translateY(-6px); }
.ex-painel { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; height: 290px; padding: 14px 8px 0; border-radius: 10px 10px 4px 4px; overflow: hidden; background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .28), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 65%, #000)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 16px 26px -16px rgba(0, 0, 0, .6); }
.ex-painel > svg { width: 46px; height: 46px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.ex-nome { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 18px; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.ex-bolas { position: relative; height: 64px; width: 100%; }
.ex-bolas span { position: absolute; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #11204f; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 18px; background: radial-gradient(circle at 35% 30%, #fff 0 30%, color-mix(in srgb, var(--c) 30%, #fff) 70%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .5); }
.ex-bolas span:nth-child(1) { left: 8%; top: 14px; }
.ex-bolas span:nth-child(2) { left: 36%; top: 0; width: 44px; height: 44px; font-size: 19px; }
.ex-bolas span:nth-child(3) { left: 64%; top: 16px; }
.ex-premio small { display: block; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .85); text-transform: uppercase; letter-spacing: .08em; }
.ex-premio b { display: block; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 22px; line-height: 1.05; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.ex-premio em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .9); font-weight: 600; }
.ex-tag { position: absolute; top: 18px; right: -38px; transform: rotate(40deg); width: 140px; padding: 3px 0; background: #e8263b; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.ex.maior .ex-painel { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 3px var(--gold), 0 16px 26px -16px rgba(0, 0, 0, .6); }
.ex-volante { position: relative; z-index: 1; display: grid; gap: 5px; margin: -34px 8px 0; padding: 0 0 8px; border-radius: 4px; background: #fff; color: #11204f; box-shadow: 0 10px 16px -8px rgba(0, 0, 0, .45), 0 3px 0 #eef1f6, 0 6px 0 #e3e7ef, 0 9px 0 #d8dde7; transform: perspective(500px) rotateX(10deg); transform-origin: bottom; }
.ex-vhd { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 4px 4px 0 0; background: var(--c); color: #fff; font-weight: 800; font-size: 12px; }
.ex-vhd svg { width: 14px; height: 14px; }
.ex-grade { height: 40px; margin: 0 8px; background: repeating-linear-gradient(90deg, rgba(220, 60, 90, .35) 0 6px, transparent 6px 11px), repeating-linear-gradient(0deg, transparent 0 4px, #fff 4px 8px); border-left: 4px dashed rgba(17, 32, 79, .5); }
.ex-vtxt { font-size: 12.5px; font-weight: 800; color: var(--royal); }
.ex-vtxt.sem { color: var(--muted); font-weight: 700; }
.expositor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 18px; min-width: 100%; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(190, 210, 245, .7)); box-shadow: 0 10px 20px -10px rgba(6, 22, 74, .6), inset 0 1px 0 #fff; pointer-events: none; }
@media (max-width: 700px) {
  .banner-res { padding-right: 15%; }
  .banner-logo { width: 16%; box-shadow: 0 0 0 2px #d9a414, 0 0 0 4px #fff1b8, 0 8px 14px -8px rgba(0, 0, 0, .5); }
  .quadro { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 2px 14px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: thin; }
  .qc { flex: none; width: 84%; scroll-snap-align: center; }
  .ex { width: 140px; }
}
.so-cel { display: none; }
@media (max-width: 700px) { .so-cel { display: inline; font-weight: 700; color: var(--royal); } }

/* ---------- EXPOSITOR ULTRA REALISTA: foto da bancada (arte do dono) + etiqueta de preço em cada volante ---------- */
.vf-rolo { overflow-x: auto; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(6, 22, 74, .7); scrollbar-width: thin; }
.vf { position: relative; container-type: inline-size; min-width: 0; aspect-ratio: 1448 / 575; background: #0a2370 url("assets/expositor.webp?v=10302029") center / cover no-repeat; overflow: hidden; }
.vf::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 45%, transparent 55%); transform: translateX(-100%); animation: vitrine-luz 9s ease-in-out infinite; }
@keyframes vitrine-luz { 50%, 100% { transform: translateX(100%); } }
.vf-col { position: absolute; top: 2%; bottom: 3%; left: var(--x0); width: var(--w); padding: 0; border: 0; background: none; cursor: pointer; border-radius: 1cqw; transition: background .2s, box-shadow .2s; }
.vf-col:hover, .vf-col:focus-visible { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 .25cqw rgba(246, 195, 68, .9), 0 0 3cqw rgba(246, 195, 68, .45); outline: 0; }
.vf-tag { position: absolute; left: 50%; top: var(--ty, 64%); transform: translateX(-50%) rotate(var(--rot, -2deg)); width: 92%; display: grid; gap: .15cqw; padding: .55cqw .5cqw .6cqw; border-radius: .5cqw; background: linear-gradient(180deg, #ffffff, #f3f5fa); border-top: .55cqw solid var(--c); box-shadow: 0 .6cqw 1.2cqw rgba(0, 0, 0, .45), inset 0 -.15cqw 0 #dfe4ee; color: #11204f; text-align: center; transition: transform .2s; }
.vf-tag::before { content: ""; position: absolute; top: -1.6cqw; left: 50%; width: .25cqw; height: 1.1cqw; background: linear-gradient(#c9ced9, #8f97a8); transform: translateX(-50%); }
.vf-col:hover .vf-tag { transform: translateX(-50%) rotate(0deg) translateY(-.4cqw) scale(1.04); }
.vf-tag small { font-size: .78cqw; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5a6a8e; line-height: 1.1; }
.vf-tag .vf-un { margin-top: -.1cqw; font-size: .9cqw; color: #0b1a44; letter-spacing: 0; text-transform: none; }
.vf-tag b { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 1.75cqw; line-height: 1; color: #0b1a44; white-space: nowrap; }
.vf-tag em { font-style: normal; font-size: .82cqw; font-weight: 700; color: #33446e; line-height: 1.15; }
.vf-tag i { justify-self: center; margin-top: .15cqw; padding: .12cqw .5cqw; border-radius: 99px; font-style: normal; font-size: .78cqw; font-weight: 800; color: #fff; background: var(--c); white-space: nowrap; }
.vf-tag i.sem { background: #9aa4ba; }
.vf-selo { position: absolute; left: 50%; top: 1.4%; transform: translateX(-50%); padding: .2cqw .6cqw; border-radius: 99px; background: #e8263b; color: #fff; font-size: .8cqw; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .4); animation: selo-pisca 2.4s ease-in-out infinite; }
.vf-selo.ac { background: linear-gradient(180deg, #ffd36b, #e0a21a); color: #3a2000; }
@keyframes selo-pisca { 50% { box-shadow: 0 0 1.4cqw rgba(255, 255, 255, .8); } }
.vf-col.maior .vf-tag { border-top-color: var(--gold); box-shadow: 0 0 0 .3cqw var(--gold), 0 .6cqw 1.4cqw rgba(0, 0, 0, .5); }
@media (max-width: 900px) { .vf { min-width: 1000px; } }

/* ---------- ESTÚDIO ULTRA REALISTA: a máquina de globo da arte do dono + painel com o resultado oficial ---------- */
.maq { --c: #1f9b6b; width: min(380px, 100%); margin: 0 auto; }
.maq-topo { position: relative; z-index: 1; }
.maq-topo img { width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); transform-origin: 50% 60%; }
.maq-topo canvas { display: block; margin: 0 auto; width: 200px; height: 264px; }
.maq-giro { position: absolute; left: 19%; top: 0; width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 255, 255, .55) 25%, transparent 32% 55%, rgba(255, 255, 255, .4) 60%, transparent 68%); filter: blur(4px); mix-blend-mode: screen; }
.maq.girando .maq-giro { animation: giro-vidro .32s linear 4, giro-some 1.3s ease forwards; }
.maq.girando .maq-topo img { animation: treme .09s linear 13; }
@keyframes giro-vidro { to { transform: rotate(360deg); } }
@keyframes giro-some { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes treme { 25% { transform: translate(1px, -1px) rotate(.4deg); } 75% { transform: translate(-1px, 1px) rotate(-.4deg); } }
.maq-painel { position: relative; margin: -4px 5% 0; padding: 4px; border-radius: 6px 6px 22px 22px; background: linear-gradient(145deg, #ffe39a, #c98a12 30%, #fff1b8 55%, #b07408); box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .6); }
.mp-in { display: grid; gap: 8px; padding: 10px 10px 12px; border-radius: 4px 4px 18px 18px; background: radial-gradient(90% 50% at 50% 0%, rgba(255, 255, 255, .22), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 35%, color-mix(in srgb, var(--c) 62%, #000)); color: #fff; }
.mp-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-campo { display: grid; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 2px rgba(246, 195, 68, .7); }
.mp-campo span { padding: 2px 6px; background: rgba(0, 0, 0, .28); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.mp-campo b { padding: 4px 6px; background: linear-gradient(180deg, #fff, #eef1f6); color: #11204f; font-family: "Bricolage Grotesque"; font-size: 17px; text-align: center; }
.mp-tit { justify-self: center; padding: 3px 14px; border-radius: 99px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(246, 195, 68, .7); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mp-bolas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mp-sub2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.mp-sub2 > div { display: grid; gap: 6px; justify-items: center; }
.mp-sub2 .div { width: 1px; align-self: stretch; background: rgba(246, 195, 68, .6); }
.mb { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #11204f; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 15px; background: radial-gradient(circle at 34% 28%, #ffffff 0 22%, #f1f4f9 45%, #c9d0dd 100%); box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px rgba(255, 255, 255, .9), 0 4px 6px -2px rgba(0, 0, 0, .55); animation: cai .6s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--base, 0s) + var(--i) * 110ms); }
.mb.ouro { background: radial-gradient(circle at 34% 28%, #fff6d0 0 20%, #f6c344 55%, #b07408 100%); box-shadow: 0 0 0 2px #fff1b8, 0 4px 6px -2px rgba(0, 0, 0, .55); }
.mb.peq { width: 30px; height: 30px; font-size: 13px; }
.mb.hit { box-shadow: inset 0 0 0 3px var(--c), 0 0 0 3px var(--gold), 0 0 14px var(--gold); }
.mb small { position: absolute; bottom: -15px; font-size: 10px; color: #fff; font-family: Figtree; }
@keyframes cai { from { transform: translateY(-150px) scale(.5); opacity: 0; } 40% { opacity: 1; } }
.mp-extra { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.mp-extra span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mp-extra b { padding: 4px 8px; border-radius: 6px; background: #fff; color: #11204f; font-size: 14px; text-align: center; box-shadow: 0 0 0 2px rgba(246, 195, 68, .7); }
.mp-jogos { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; font-size: 11.5px; font-weight: 700; }
.mp-jogos div { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 4px; align-items: center; padding: 2px 4px; border-radius: 4px; background: #fff; color: #11204f; }
.mp-jogos div > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-jogos i { font-style: normal; display: grid; place-items: center; height: 16px; border-radius: 3px; background: var(--c); color: #fff; font-size: 10px; }
.mp-bil { display: grid; gap: 4px; }
.mp-bil div { display: grid; grid-template-columns: 70px 1fr auto; gap: 6px; align-items: center; padding: 3px 8px; border-radius: 6px; background: #fff; color: #11204f; font-size: 13px; font-weight: 800; }
.res-info { margin-top: 14px; }
.maq-com-sup .mp-bolas { padding-bottom: 12px; }
@media (max-width: 700px) {
  .mb { width: 32px; height: 32px; font-size: 14px; }
  .mb.peq { width: 27px; height: 27px; font-size: 12px; }
}

/* ---------- EXPOSITOR EM CARROSSEL (dono 21/10 18:50: "maior e mais bonito e passando igual carrossel") ----------
   cada coluna da foto (painel + volantes) desfila sem parar; mouse/dedo em cima pausa; setas andam um jogo. */
.vc-palco { position: relative; overflow: hidden; border-radius: 26px; padding: 26px 0 0; background:
  radial-gradient(60% 50% at 50% 0%, rgba(255, 220, 140, .35), transparent 70%),
  linear-gradient(180deg, #0b2f9c 0%, #0a2370 58%, #2a63e0 58.2%, #6f9bf5 62%, #1d4fd6 74%, #0a2370 100%);
  box-shadow: 0 30px 60px -30px rgba(6, 22, 74, .8), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.vc-palco::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 1.5px, transparent 2px) 0 0 / 46px 46px; opacity: .25; pointer-events: none; }
.vc-palco::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #06164a 0, transparent 7%, transparent 93%, #06164a 100%); }
.vc-trilho { position: relative; display: flex; width: max-content; padding: 0 0 18px; animation: vc-corre var(--vc-dur, 60s) linear infinite; }
.vc-palco:hover .vc-trilho, .vc-palco.parado .vc-trilho { animation-play-state: paused; }
@keyframes vc-corre { to { transform: translateX(-50%); } }
.vc { position: relative; flex: none; height: 560px; margin: 0 2px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .25s, filter .25s; }
.vc > img { height: 100%; width: auto; border-radius: 10px 10px 4px 4px; box-shadow: 0 18px 24px -14px rgba(0, 0, 0, .7); -webkit-box-reflect: below 2px linear-gradient(transparent 82%, rgba(255, 255, 255, .22)); }
.vc:hover { transform: translateY(-8px) scale(1.03); z-index: 2; filter: drop-shadow(0 0 18px rgba(246, 195, 68, .55)); }
.vc-tag { position: absolute; left: 50%; top: 58%; width: 138px; transform: translateX(-50%) rotate(var(--rot, -2deg)); display: grid; justify-items: center; padding: 10px 8px 9px; border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%); color: #11204f; text-align: center; box-shadow: 0 0 0 3px var(--c), 0 0 0 5px #fff1b8, 0 14px 24px -8px rgba(0, 0, 0, .65); transition: transform .25s; }
.vc-tag::before { content: ""; position: absolute; top: -26px; left: 50%; width: 3px; height: 22px; transform: translateX(-50%); background: linear-gradient(#e7ebf2, #8f97a8); border-radius: 2px; }
.vc-tag::after { content: ""; position: absolute; top: -32px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b8c0cf); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.vc:hover .vc-tag { transform: translateX(-50%) rotate(0deg) scale(1.06); }
.vc-tag small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5a6a8e; }
.vc-tag .vc-val { display: flex; align-items: baseline; gap: 3px; margin: 2px 0 0; font-family: "Bricolage Grotesque"; font-weight: 800; color: #0b1a44; line-height: 1; }
.vc-tag .vc-val span { font-size: 15px; }
.vc-tag .vc-val b { font-size: 38px; letter-spacing: -.02em; }
.vc-tag .vc-un { font-family: "Bricolage Grotesque"; font-size: 15px; font-weight: 800; color: var(--c); text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; }
.vc-tag .vc-sem { font-family: "Bricolage Grotesque"; font-size: 21px; font-weight: 800; line-height: 1.1; padding: 4px 0; }
.vc-tag em { margin-top: 5px; padding: 2px 9px; border-radius: 99px; background: #eef2fb; font-style: normal; font-size: 12.5px; font-weight: 800; color: #33446e; }
.vc-tag i { margin-top: 6px; padding: 4px 12px; border-radius: 99px; font-style: normal; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--c); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.vc-tag i.sem { background: #9aa4ba; }
.vc.maior .vc-tag { box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px #fff1b8, 0 0 26px rgba(246, 195, 68, .8), 0 14px 24px -8px rgba(0, 0, 0, .65); }
.vc.maior .vc-tag small { color: #b07408; }
.vc-selo { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 4px 10px; border-radius: 99px; background: #e8263b; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); animation: selo-pisca 2.4s ease-in-out infinite; }
.vc-selo.ac { background: linear-gradient(180deg, #ffd36b, #e0a21a); color: #3a2000; }
.vc-seta { position: absolute; top: 44%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--navy); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .6); }
.vc-seta.esq { left: 14px; }
.vc-seta.dir { right: 14px; }
.vc-seta:hover { background: #fff; transform: scale(1.06); }
@media (max-width: 700px) {
  .vc { height: 440px; }
  .vc-tag { width: 104px; padding: 7px 4px; }
  .vc-tag small { font-size: 9px; }
  .vc-tag .vc-val b { font-size: 27px; }
  .vc-tag .vc-un, .vc-tag em, .vc-tag i { font-size: 11px; }
  .vc-tag i { padding: 3px 8px; }
  .vc-seta { width: 40px; height: 40px; }
}

/* globo com as bolas de verdade: máquina atrás, canvas das bolas no meio, grade/placa/brilho na frente */
.maq-topo .maq-bolas, .maq-topo .maq-frente { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; pointer-events: none; filter: none; }
.maq-frente { object-fit: fill; }
.maq.girando .maq-topo img, .maq.girando .maq-topo .maq-bolas { animation: treme .09s linear 8; }

/* ---------- PAINEL PREMIUM dos números do topo (arte do dono, tools/recorta_painel.py) ----------
   PC: a arte inteira de fundo e cada cartão posicionado em % (medido em review/painel-grade.jpg);
   celular: cada cartão com o seu recorte, em carrossel de arrastar. Fontes em cqw = acompanham o tamanho do cartão. */
.loja .hero-in { grid-template-columns: 1fr; gap: 26px; padding-bottom: 30px; }
.loja .hero-txt { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px 40px; align-items: end; }
.loja .hero-txt .eyebrow, .loja .hero-txt h1 { grid-column: 1; }
.loja .hero-txt .lead { grid-column: 2; grid-row: 2; margin: 0; }
.loja .hero-txt .hero-cta { grid-column: 2; grid-row: 3; margin-top: 0; }
.painel-st { position: relative; width: 100%; aspect-ratio: 1656 / 710; background: url("assets/painel/painel.webp?v=10302029") center / 100% 100% no-repeat; filter: drop-shadow(0 20px 26px rgba(6, 22, 74, .18)); }
.ps-card { position: absolute; left: var(--l); top: 5.63%; width: var(--w); height: 71.8%; container-type: inline-size; color: #0b1a44; text-decoration: none; border-radius: 3%; transition: transform .2s, filter .2s; }
.ps-card:hover { transform: translateY(-4px); filter: drop-shadow(0 10px 14px rgba(6, 22, 74, .25)); }
.ps-badge { position: absolute; left: 7.5%; top: 30%; width: 18.4%; height: 10.8%; display: grid; place-items: center; color: #fff; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 6.4cqw; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.ps-val { position: absolute; left: 6%; right: 6%; top: 43%; height: 22%; display: grid; place-items: center; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 11.5cqw; line-height: 1; letter-spacing: -.01em; white-space: nowrap; color: #0b2f9c; text-shadow: 0 2px 0 #fff, 0 6px 14px rgba(11, 47, 156, .18); }
.ps-sub { position: absolute; left: 21.6%; top: 70.2%; width: 63.7%; height: 10.6%; display: grid; place-items: center; padding: 0 2%; font-weight: 700; font-size: 4.6cqw; color: #33446e; text-align: center; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  .loja .hero-txt { grid-template-columns: 1fr; }
  .loja .hero-txt .lead, .loja .hero-txt .hero-cta { grid-column: 1; grid-row: auto; }
  .loja .hero-txt .lead { margin-top: 6px; }
}
@media (max-width: 700px) {
  .painel-st { aspect-ratio: auto; background: none; filter: none; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .ps-card { position: relative; left: auto; top: auto; flex: none; width: 74%; height: auto; aspect-ratio: 1; background: var(--bg) center / 100% 100% no-repeat; scroll-snap-align: center; border-radius: 22px; filter: drop-shadow(0 10px 14px rgba(6, 22, 74, .2)); }
}

/* ---------- PLACAS DE PRÊMIO com a arte do dono (tools/recorta_placar.py) ---------- */
.placar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-top: 10px; padding-bottom: 4px; transform: none; }
.pl2 { position: relative; display: block; aspect-ratio: var(--ar); background: center / 100% 100% no-repeat; container-type: inline-size; text-decoration: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); transition: transform .2s; }
.pl2:hover { transform: translateY(-3px) scale(1.01); }
.pl2 > span { position: absolute; display: grid; place-items: center; }
.pl2-dig { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 11cqw; line-height: 1; color: #11204f; text-shadow: 0 1px 0 #fff; animation: vira .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.pl2-dig.virg { font-size: 8cqw; }
.pl2-un { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 7.4cqw; line-height: 1; color: #11204f; text-shadow: 0 1px 0 #fff; }
.pl2-bar { font-weight: 800; font-size: 3.7cqw; white-space: nowrap; overflow: hidden; border-radius: 99px; letter-spacing: .01em; }
.pl2 > .pl2-conc { display: flex; justify-content: center; gap: 1.2cqw; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 .6cqw 1.2cqw -.4cqw rgba(0, 0, 0, .45); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.pl2-conc b { padding: 0 1.4cqw; border-radius: 99px; background: linear-gradient(180deg, #ffe08a, #f2b21c); color: #4a2a00; text-shadow: none; font-weight: 800; text-transform: uppercase; font-size: .9em; }
.pl2 > .pl2-dia { color: #fff; background: linear-gradient(180deg, #ffb24a, #ff7a00 60%, #d65d00); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 .6cqw 1.2cqw -.4cqw rgba(0, 0, 0, .45); text-shadow: 0 1px 1px rgba(0, 0, 0, .3); text-transform: uppercase; font-size: 3.3cqw; }
.pl2 > .pl2-dia.hoje { background: linear-gradient(180deg, #ff5a6a, #e8263b 60%, #b3121f); animation: dia-pisca 1.6s ease-in-out infinite; }
@keyframes dia-pisca { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 2.4cqw rgba(232, 38, 59, .9); filter: brightness(1.12); } }
@media (max-width: 1100px) { .placar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- MEGA DA VIRADA 3D ultra premium (dono 21/10) ---------- */
.virada { min-height: 760px; background:
  radial-gradient(55% 45% at 50% 38%, rgba(246, 195, 68, .28), transparent 70%),
  radial-gradient(40% 35% at 15% 85%, rgba(31, 155, 107, .35), transparent 70%),
  radial-gradient(40% 35% at 85% 85%, rgba(42, 99, 224, .45), transparent 70%),
  linear-gradient(180deg, #020718 0%, #061347 45%, #0a2370 100%); }
.virada::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; background: repeating-linear-gradient(135deg, #fff 0 2px, transparent 2px 28px); }
.vd-raios { position: absolute; left: 50%; top: 34%; width: 1500px; height: 1500px; transform: translate(-50%, -50%); pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .14) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 55%); mask: radial-gradient(circle, #000 0 18%, transparent 55%); animation: vd-gira 60s linear infinite; }
@keyframes vd-gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
.virada-in { padding: 64px 24px 150px; max-width: 900px; }
.vd-logo { display: grid; justify-items: center; gap: 0; margin: 0 0 14px; line-height: .86; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
/* letras em relevo: o degradê metálico vai no texto e a "espessura" sai das sombras empilhadas */
/* letras em relevo NÍTIDO: o próprio texto é a ESPESSURA (cor escura + sombras sólidas empilhadas em em, acompanham o
   tamanho) e a FACE metálica é uma cópia por cima (::before, degradê recortado no texto); ::after = brilho passando.
   (filter: drop-shadow borrava; face como fundo do elemento ficava por baixo da cópia) */
.vd-mega, .vd-virada { position: relative; }
.vd-mega::before, .vd-virada::before { content: attr(data-t); position: absolute; inset: 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.vd-mega { font-size: clamp(76px, 13vw, 168px); color: #8a5600; text-shadow: 0 .006em 0 #9a6200, 0 .012em 0 #8a5600, 0 .018em 0 #7a4c00, 0 .024em 0 #6a4100, 0 .03em 0 #5a3700, 0 .036em 0 #4a2d00, 0 .042em 0 #3d2500, 0 .06em .03em rgba(0, 0, 0, .55), 0 .12em .14em rgba(0, 0, 0, .5); }
.vd-mega::before { background-image: linear-gradient(180deg, #fffbe8 0%, #ffe08a 24%, #f6c344 42%, #d18b0c 58%, #ffd863 76%, #fff3c4 100%); }
.vd-linha { display: flex; align-items: center; gap: .18em; font-size: clamp(54px, 9vw, 118px); }
.vd-da { font-size: .38em; padding: .18em .34em; border-radius: .3em; color: #0b1a44; background: linear-gradient(180deg, #ffffff, #c9d3e6 55%, #f4f7ff); box-shadow: 0 .06em 0 #8f9bb5, 0 .12em .2em rgba(0, 0, 0, .5); letter-spacing: .04em; }
.vd-virada { color: #12704b; text-shadow: 0 .007em 0 #1b8a5c, 0 .014em 0 #177a51, 0 .021em 0 #136a46, 0 .028em 0 #0f5a3b, 0 .035em 0 #0b4a30, 0 .042em 0 #083d27, 0 .06em .03em rgba(0, 0, 0, .55), 0 .12em .14em rgba(0, 0, 0, .5); }
.vd-virada::before { background-image: linear-gradient(180deg, #ffffff 0%, #f1f5ff 28%, #c3cee4 48%, #93a2c0 60%, #e9eefb 80%, #ffffff 100%); }
.vd-ano { margin-top: .22em; font-size: clamp(22px, 3vw, 34px); letter-spacing: .3em; padding: .2em .4em .2em .7em; border-radius: 99px; color: #fff; background: linear-gradient(180deg, #3fd18f, #1f9b6b 55%, #12704b); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 6px 0 #0b4d33, 0 14px 22px rgba(0, 0, 0, .5); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.virada .lead { color: #dbe6ff; font-size: 18px; max-width: 620px; }
/* contagem em placas 3D com dígito dourado e o vinco do meio */
.cd { gap: 14px; margin: 30px 0 22px; perspective: 700px; }
.cd div { position: relative; min-width: 104px; padding: 16px 10px 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(180deg, #24367a 0%, #142458 49%, #0b1741 51%, #0a1438 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 0 #050b26, 0 22px 30px -8px rgba(0, 0, 0, .7), 0 0 0 2px rgba(246, 195, 68, .35); transform: rotateX(8deg); }
.cd div::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.cd b { font-size: 58px; background: linear-gradient(180deg, #fff6d0 0%, #ffd863 40%, #e09a12 60%, #ffe39a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #6a4100) drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.cd small { position: relative; color: #cfdcff; letter-spacing: .14em; }
/* placa dourada do valor já reservado */
.vd-reserva { display: grid; width: fit-content; margin-left: auto !important; margin-right: auto !important; gap: 2px; margin: 0 0 22px; padding: 12px 26px 14px; border-radius: 18px; color: #3a2400; background: linear-gradient(180deg, #fff3c4 0%, #f6c344 45%, #d99a14 55%, #ffe08a 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 6px 0 #8a5600, 0 18px 28px rgba(0, 0, 0, .55); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.vd-reserva b { font-family: "Bricolage Grotesque"; font-size: 40px; letter-spacing: -.01em; line-height: 1; color: #2a1800; text-transform: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.vd-btn { min-height: 56px; padding: 0 30px; font-size: 17px; }
/* bolas da Mega 3D flutuando */
.vd-bolas { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.vd-bola { position: absolute; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: calc(var(--s) * .4); color: #1f9b6b; background: radial-gradient(circle at 34% 28%, #ffffff 0 18%, #f2f5fa 42%, #c3ccdb 80%, #8f9bb3 100%); box-shadow: inset -.12em -.14em .3em rgba(0, 0, 0, .25), 0 .5em 1em rgba(0, 0, 0, .55), 0 0 0 .14em #1f9b6b inset; animation: vd-flutua 6s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes vd-flutua { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-18px) rotate(8deg); } }
.vd-palco { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; background: radial-gradient(60% 100% at 50% 100%, rgba(246, 195, 68, .35), transparent 70%), linear-gradient(180deg, transparent, rgba(2, 7, 24, .6)); }
@media (max-width: 700px) {
  .virada { min-height: 700px; }
  .virada-in { padding: 48px 16px 120px; }
  .vd-bolas { display: none; }
  .cd { gap: 8px; }
  .cd div { min-width: 72px; padding: 12px 6px 10px; }
  .cd b { font-size: 40px; }
  .vd-reserva b { font-size: 30px; }
}

/* logo da Virada com a arte do dono: flutua de leve, brilho passando recortado no formato do logo */
.vd-logo-arte { position: relative; display: block; width: min(760px, 100%); margin: 0 auto 10px; animation: vd-logo-boia 5s ease-in-out infinite; }
.vd-logo-arte img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 40px rgba(246, 195, 68, .25)); }
.vd-logo-luz { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .75) 48%, transparent 56%) 0 0 / 300% 100% no-repeat; -webkit-mask: url("assets/virada-logo-1200.webp?v=10302029") center / 100% 100% no-repeat; mask: url("assets/virada-logo-1200.webp?v=10302029") center / 100% 100% no-repeat; mix-blend-mode: soft-light; animation: vd-logo-luz 4.5s ease-in-out infinite; }
@keyframes vd-logo-luz { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
@keyframes vd-logo-boia { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.01); } }
.virada-in { padding-top: 40px; }

/* R$ 1 BILHÃO com as bolas reais da Mega (artes do dono) */
.vd-bilhao { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 6px auto 26px; width: min(980px, 100%); }
.vd-grupo { justify-self: end; width: min(300px, 100%); height: auto; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6)); animation: vd-flutua2 6s ease-in-out infinite; }
.vd-bola10 { justify-self: start; width: min(150px, 100%); height: auto; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .6)); animation: vd-rola 7s ease-in-out infinite; }
@keyframes vd-flutua2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes vd-rola { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-14px) rotate(8deg); } }
.vd-premio { position: relative; display: grid; justify-items: center; padding: 14px 34px 16px; border-radius: 22px; color: #2a1800; text-align: center; background: linear-gradient(180deg, #fff6d0 0%, #ffe08a 22%, #f6c344 45%, #c98a12 56%, #ffd863 78%, #fff3c4 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(120, 70, 0, .35), 0 7px 0 #7a4c00, 0 0 0 3px #fff1b8, 0 0 0 5px #b07408, 0 0 50px rgba(246, 195, 68, .45), 0 24px 34px rgba(0, 0, 0, .55); overflow: hidden; }
.vd-premio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 48%, transparent 58%) 0 0 / 300% 100%; animation: vd-logo-luz 4s ease-in-out infinite; pointer-events: none; }
.vd-premio span { font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.vd-premio b { display: flex; align-items: baseline; gap: 8px; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -.02em; color: #1d5e2f; text-shadow: 0 1px 0 #fff6d0, 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 rgba(90, 55, 0, .35); }
.vd-premio b small { font-size: .45em; color: #2a1800; }
.vd-premio em { margin-top: 6px; padding: 3px 14px; border-radius: 99px; font-style: normal; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #3fd18f, #1f9b6b 60%, #12704b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
@media (max-width: 700px) {
  .vd-bilhao { grid-template-columns: 1fr; gap: 0; }
  .vd-grupo { justify-self: center; width: 78%; margin-bottom: -18px; position: relative; z-index: 1; }
  .vd-bola10 { display: none; }
  .vd-premio { padding: 24px 18px 14px; }
}

.vd-reais { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.vd-real { position: absolute; height: auto; transform: translate(-50%, 0) rotate(var(--r)); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); animation: vd-real 7s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes vd-real { 0%, 100% { transform: translate(-50%, 0) rotate(var(--r)); } 50% { transform: translate(-50%, -20px) rotate(calc(var(--r) * -1)); } }
@media (max-width: 1100px) { .vd-real:nth-child(n+5) { display: none; } .vd-real { width: 84px !important; } }
@media (max-width: 700px) { .vd-reais { display: none; } }

/* placa do bilhão com a arte do dono: brilho passando recortado no formato da placa + luz dourada em volta */
.vd-placa { position: relative; width: min(520px, 46vw); animation: vd-flutua2 6s ease-in-out infinite; }
.vd-placa img { width: 100%; height: auto; filter: drop-shadow(0 0 30px rgba(246, 195, 68, .5)) drop-shadow(0 22px 26px rgba(0, 0, 0, .6)); }
.vd-placa-luz { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .8) 48%, transparent 56%) 0 0 / 300% 100% no-repeat; -webkit-mask: url("assets/placa-bilhao.webp?v=10302029") center / 100% 100% no-repeat; mask: url("assets/placa-bilhao.webp?v=10302029") center / 100% 100% no-repeat; mix-blend-mode: soft-light; animation: vd-logo-luz 4s ease-in-out infinite; }
.vd-bilhao { width: min(1100px, 100%); }
@media (max-width: 700px) { .vd-placa { width: 100%; } }

/* ---------- MESA DA SORTE (conferidor premium) ---------- */
.conf.mesa { position: relative; overflow: hidden; padding: 22px 20px 20px; color: #fff; border: 0; background:
  radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .1), transparent 60%),
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 6px),
  linear-gradient(170deg, #0d2369, #071541 70%); box-shadow: 0 0 0 3px #d9a414, 0 0 0 5px #fff1b8, 0 0 0 7px #b07408, 0 30px 50px -20px rgba(6, 22, 74, .7); }
.mesa-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.mesa .conf-hd b { display: block; color: #fff; font-size: 24px; background: linear-gradient(180deg, #fff6d0, #f6c344 55%, #d99a14); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mesa .conf-hd small { display: block; color: #b8c9f5; font-size: 13px; font-weight: 600; }
.mesa .btn-mini { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.mesa .btn-mini:hover { background: rgba(255, 255, 255, .18); }
/* bola 3D: face branca com o número, faixa na cor do jogo, aro dourado, brilho e sombra de esfera */
.tb { --sz: 100%; position: relative; aspect-ratio: 1; width: 100%; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(11px, 2.6cqw, 17px); color: color-mix(in srgb, var(--c) 70%, #000);
  background: radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 50% 47%, #ffffff 0 41%, #e9edf4 47%, #f2c14a 48.5%, #a96d00 51%, var(--c) 52.5%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  box-shadow: inset -.18em -.25em .45em rgba(0, 0, 0, .45), inset .1em .12em .2em rgba(255, 255, 255, .5), 0 .3em .45em rgba(0, 0, 0, .55);
  transition: transform .18s, box-shadow .18s, opacity .25s, filter .25s; }
.tb:hover { transform: translateY(-3px) scale(1.08); }
.tb.usada { transform: scale(.72); opacity: .18; filter: grayscale(1); box-shadow: inset 0 .2em .4em rgba(0, 0, 0, .8); cursor: pointer; }
.tb.pisca { transform: scale(1.12); box-shadow: 0 0 0 3px #fff1b8, 0 0 18px #f6c344; }
.tb.acerto { color: #3a2400; background: radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, 0) 22%), radial-gradient(circle at 50% 47%, #fff6d0 0 40%, #ffd863 52%, #d18b0c 80%, #8a5600 100%);
  box-shadow: 0 0 0 2px #fff1b8, 0 0 22px 4px rgba(246, 195, 68, .85), inset -.18em -.25em .45em rgba(120, 70, 0, .45); animation: acende .6s ease; }
@keyframes acende { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.bandeja { container-type: inline-size; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 12px; border-radius: 18px;
  background: radial-gradient(90% 80% at 50% 0%, rgba(255, 255, 255, .08), transparent 70%), linear-gradient(180deg, #0a1c58, #061036);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bandeja.grande { gap: 4px; padding: 8px; }
.canaleta-rot { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 4px 6px; }
.canaleta-rot span { font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #f6c344; }
.canaleta-rot em { font-style: normal; font-size: 12.5px; color: #b8c9f5; font-weight: 700; }
.canaleta { container-type: inline-size; display: flex; flex-wrap: wrap; gap: 6px; min-height: 56px; padding: 8px 10px; border-radius: 99px;
  background: linear-gradient(180deg, #8a5600, #d99a14 18%, #ffe39a 42%, #c98a12 62%, #6a4100); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .15); }
.canaleta.compacta { border-radius: 22px; gap: 4px; }
.canaleta .slot { flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2400, #1d1200 70%); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .35); }
.canaleta.compacta .slot, .canaleta.compacta .tb { width: 28px; height: 28px; font-size: 11px; }
.canaleta .tb { flex: none; width: 40px; height: 40px; font-size: 15px; cursor: default; }
.canaleta .tb.chega { animation: rola-entra .55s cubic-bezier(.3, 1.3, .5, 1); }
.canaleta.oficial .tb.chega { animation: cai-bola .6s cubic-bezier(.3, 1.4, .5, 1); }
.canaleta .tb.trevo-b { --c: #b07408; }
@keyframes rola-entra { from { transform: translateX(40px) rotate(220deg); opacity: 0; } }
@keyframes cai-bola { from { transform: translateY(-70px) scale(.6); opacity: 0; } 60% { opacity: 1; } }
.canaleta .div2 { flex-basis: 100%; height: 0; }
.mesa-acao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.mesa-girar { flex: 1; min-height: 54px; font-size: 17px; }
.mesa-girar:disabled { filter: grayscale(.7) brightness(.8); cursor: not-allowed; transform: none; box-shadow: none; }
.mesa-girar.girando svg { animation: gira-ic .6s linear infinite; }
@keyframes gira-ic { to { transform: rotate(360deg); } }
.placar-acertos { display: grid; justify-items: center; min-width: 96px; padding: 6px 12px 8px; border-radius: 14px; background: linear-gradient(180deg, #24367a 0%, #142458 49%, #0b1741 51%, #0a1438); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 2px rgba(246, 195, 68, .5), 0 6px 0 #050b26; }
.placar-acertos span { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #cfdcff; }
.placar-acertos b { font-family: "Bricolage Grotesque"; font-size: 34px; line-height: 1; background: linear-gradient(180deg, #fff6d0, #ffd863 45%, #e09a12 60%, #ffe39a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.placar-acertos b.vira { animation: vira .45s cubic-bezier(.3, 1.4, .5, 1); }
.mesa-veredito { position: relative; z-index: 6; margin-top: 16px; padding: 16px; border-radius: 18px; text-align: center; animation: carimbo .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.mesa-veredito.ganhou { color: #2a1800; background: linear-gradient(180deg, #fff6d0, #f6c344 45%, #d99a14 55%, #ffe08a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 6px 0 #8a5600, 0 0 40px rgba(246, 195, 68, .6); }
.mesa-veredito.perdeu { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); color: #dbe6ff; }
.mesa-veredito b { display: block; font-family: "Bricolage Grotesque"; font-size: clamp(26px, 4vw, 38px); line-height: 1.05; letter-spacing: -.01em; }
.mesa-veredito.ganhou b { color: #1d5e2f; text-shadow: 0 2px 0 rgba(255, 255, 255, .6); }
.mesa-veredito span { display: block; margin-top: 6px; font-weight: 700; font-size: 14.5px; }
.mesa-veredito button { margin-top: 10px; }
@keyframes carimbo { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.mesa .conf-msg { background: rgba(255, 255, 255, .07); color: #dbe6ff; }
.voa { position: fixed; z-index: 90; pointer-events: none; margin: 0; }
@media (max-width: 700px) {
  .conf.mesa { padding: 16px 12px; }
  .bandeja { gap: 4px; padding: 8px; }
  .canaleta .slot, .canaleta .tb { width: 32px; height: 32px; font-size: 12.5px; }
  .canaleta.compacta .slot, .canaleta.compacta .tb { width: 24px; height: 24px; font-size: 10px; }
  .placar-acertos { min-width: 80px; }
  .mesa-girar { font-size: 15.5px; }
}

/* faixa do nome: as lojas vão girando (dono 21/10: "quero que fique rotacionando para o nome das lojas") */
.lojas-gira { position: relative; display: inline-grid; min-width: 0; overflow: hidden; height: 1.5em; perspective: 300px; }
.lojas-gira .lg-item { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; justify-self: end; transform: translateY(100%) rotateX(-70deg); opacity: 0; transition: transform .55s cubic-bezier(.3, 1.2, .5, 1), opacity .4s; }
.lojas-gira .lg-item.on { transform: none; opacity: 1; }
.lojas-gira .lg-item.sai { transform: translateY(-100%) rotateX(70deg); opacity: 0; }
.lojas-gira .lg-item b { font-family: Figtree, sans-serif; font-size: inherit; color: #fff; }
.lojas-gira .lg-item i { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; font-style: normal; font-size: .82em; font-weight: 800; color: #3a2400; background: linear-gradient(180deg, #ffe08a, #f2b21c); }
@media (max-width: 700px) { .lojas-gira .lg-item { justify-self: start; } }

/* ---------- ROTA DA SORTE: mapa com o carro ---------- */
.rota { display: grid; grid-template-columns: 1.65fr 1fr; gap: 18px; margin-bottom: 18px; align-items: start; }
.rota-mapa { position: sticky; top: 130px; }
.rota-mapa { position: relative; border-radius: 26px; overflow: hidden; background: #071541; box-shadow: 0 0 0 3px #d9a414, 0 0 0 5px #fff1b8, 0 0 0 7px #b07408, 0 30px 50px -24px rgba(6, 22, 74, .75); }
#rota-svg { display: block; width: 100%; height: auto; }
.rota-selo { position: absolute; left: 16px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; background: rgba(4, 12, 40, .7); border: 1px solid rgba(246, 195, 68, .55); color: #f6c344; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); }
.rota-play { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(4, 12, 40, .7); color: #fff; display: grid; place-items: center; }
.rota-lado { display: grid; gap: 12px; align-content: start; }
.rota-parada { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 18px; border-radius: 22px; color: #fff; background: radial-gradient(90% 90% at 100% 0%, rgba(246, 195, 68, .25), transparent 60%), linear-gradient(150deg, #0b2f9c, #06164a); box-shadow: 0 20px 34px -20px rgba(6, 22, 74, .8); transition: transform .3s; }
.rota-parada.chegou { animation: chegou .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes chegou { 0% { transform: scale(.96); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
.rp-tag { display: inline-flex; align-items: center; gap: 6px; color: #f6c344; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.rp-tag em { font-style: normal; }
.rota-parada b { font-family: "Bricolage Grotesque"; font-size: 24px; line-height: 1.1; }
.rota-parada small { color: #cfdcff; font-weight: 600; font-size: 14px; }
.rota-parada .btn { justify-self: start; margin-top: 8px; min-height: 42px; }
.rota .pontos li { cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.rota .pontos li:hover { transform: translateX(4px); }
.rota .pontos li.ativo { background: linear-gradient(90deg, #fff7dc, #fff); border-color: #f2c14a; box-shadow: 0 0 0 2px #f6c344, 0 10px 20px -12px rgba(176, 116, 8, .6); }
.rota .pontos li.ativo .pin { animation: pino-pula .8s ease infinite alternate; }
@keyframes pino-pula { to { transform: translateY(-4px); } }
.rota .pontos li b small { display: block; }
.rota .map { grid-column: 1 / -1; }
/* SVG do mapa */
.rt-lbl { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; fill: rgba(207, 220, 255, .35); letter-spacing: .2em; }
.rt-pin-pulso { transform-box: fill-box; transform-origin: center; animation: rt-pulso 2.2s ease-out infinite; }
@keyframes rt-pulso { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.rt-pin { cursor: pointer; transition: transform .3s; transform-box: fill-box; transform-origin: 50% 100%; }
.rt-pin.on { transform: scale(1.25); }
.rt-pin .rt-nome { opacity: 0; transition: opacity .3s; }
.rt-pin.on .rt-nome, .rt-pin:hover .rt-nome { opacity: 1; }
.rt-rota-anda { animation: rt-traco 1.2s linear infinite; }
@keyframes rt-traco { to { stroke-dashoffset: -28; } }
/* letreiro neon do horário */
.at-main { grid-template-columns: 1fr 1.2fr; align-items: start; column-gap: 28px; }
.at-main .at-btns { grid-column: 1; }
.at-main .hours { grid-column: 2; grid-row: 1 / span 2; }
.neon-box { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: radial-gradient(80% 90% at 50% 0%, #142a73, #050d2e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 30px -16px rgba(0, 0, 0, .6); }
.neon { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 6px 0; }
.neon > i { display: none; }
.neon b { font-family: "Bricolage Grotesque"; font-size: clamp(30px, 4vw, 44px); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px #ff5a6a, 0 0 26px #e8263b, 0 0 48px #e8263b; animation: neon-pisca 6s infinite; }
.neon.open b { text-shadow: 0 0 4px #fff, 0 0 12px #5dffb0, 0 0 26px #12a464, 0 0 48px #12a464; }
.neon small { color: #cfdcff; font-weight: 700; font-size: 14px; }
@keyframes neon-pisca { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
.neon-relogio { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: #f6c344; }
.neon-relogio b { font-family: "Bricolage Grotesque"; font-size: 28px; font-variant-numeric: tabular-nums; color: #fff; }
.neon-relogio small { color: #8fa3d6; font-size: 12px; font-weight: 700; }
@media (max-width: 1100px) {
  .rota { grid-template-columns: 1fr; }
  .at-main { grid-template-columns: 1fr; }
  .at-main .hours, .at-main .at-btns { grid-column: auto; grid-row: auto; }
}
@media (max-width: 700px) {
  .rota-mapa { border-radius: 18px; }
  .rota-selo { font-size: 11px; padding: 5px 10px; left: 10px; top: 10px; }
  .rota-play { width: 34px; height: 34px; }
  .rota-parada b { font-size: 20px; }
}

.fach-trevo { width: 84px; height: auto; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .35)) drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); animation: trevo-gira 9s ease-in-out infinite; }
@keyframes trevo-gira { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(8deg) scale(1.05); } }
@media (max-width: 700px) { .fach-trevo { width: 46px; } }

.neon > span { display: grid; justify-items: center; gap: 8px; }
.neon b { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }

/* botões com a arte 3D do dono */
.btn-arte { display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 99px; transition: transform .18s, filter .18s; }
.btn-arte img { height: 100%; width: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
.btn-arte:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }
.btn-arte:active { transform: scale(.97); }
.btn-arte:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; }
.hdr .hdr-wa.btn-arte { height: 48px; min-height: 0; padding: 0; background: none; }
.pool-buy .btn-arte { height: 50px; flex: 0 1 auto; max-width: 100%; }
.pool-buy .btn-arte img { max-width: 100%; height: 100%; object-fit: contain; }
.vip-buy .btn-arte { height: 58px; }
.btn-tel { height: 56px; }
@media (max-width: 700px) {
  .hdr .hdr-wa.btn-arte { height: 30px; flex: none; }
  .brand { min-width: 0; }
  .brand span { min-width: 0; }
  .brand small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pool-buy .btn-arte { height: 52px; }
  .vip-buy .btn-arte { height: 54px; }
  .btn-tel { height: 52px; }
}
@media (max-width: 380px) {
  .status-pill { display: none; }
  .brand small { font-size: 14px; }
  .hdr-in { gap: 10px; }
}

.btn-ver { height: 58px; }
.rota-parada .btn-chegar { justify-self: start; height: 50px; margin-top: 8px; }
.pontos .pin.pin-arte { width: 48px; height: 48px; padding: 0; background: none !important; border-radius: 0; }
.pontos .pin.pin-arte img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.vip-tag.vip-arte { padding: 0; background: none; height: 40px; }
.vip-tag.vip-arte img { height: 100%; width: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
@media (max-width: 700px) { .btn-ver { height: 52px; } .pontos .pin.pin-arte { width: 40px; height: 40px; } }
.rota .pontos li { -webkit-user-select: none; user-select: none; }
.rota .pontos li a { -webkit-user-select: auto; user-select: auto; }
.gate-btns { align-items: center; }
.btn-18 { height: 60px; }
@media (max-width: 700px) { .btn-18 { height: 54px; } }
.btn-18:focus-visible { outline: none; filter: drop-shadow(0 0 10px rgba(246, 195, 68, .75)); }
.gate-btns .btn-glass { min-height: 54px; }