/* Lotérica Villa da Sorte (v2, 15/10/2026) — conceito próprio: o site é uma CASA.
   Paleta clara (mármore marfim) com esmeralda do trevo, ouro e azul-noite do medalhão; o saguão (quadro de sorteios)
   e o portão são as partes escuras. Fontes: Cormorant Garamond (títulos), Manrope (texto), JetBrains Mono (quadro). */
:root {
  --ivory: #f7f2e8;
  --ivory-2: #efe5d1;
  --paper: #fffdf8;
  --navy: #0a1838;
  --navy-2: #13285a;
  --navy-3: #1d3a7a;
  --emerald: #0d7a45;
  --emerald-2: #19a85b;
  --emerald-3: #e3f4ea;
  --gold: #c8962e;
  --gold-1: #f1cf73;
  --gold-3: #8a5b0c;
  --ink: #18213d;
  --muted: #5e6680;
  --line: rgba(10, 24, 56, .12);
  --gold-grad: linear-gradient(180deg, #fff3c4 0%, #f1cf73 38%, #d9a540 70%, #a8730f 100%);
  --gold-text: linear-gradient(100deg, #8a5b0c 0%, #c8962e 25%, #e9c060 45%, #a8730f 65%, #c8962e 100%);
  --shadow: 0 24px 60px rgba(10, 24, 56, .14);
  --shadow-sm: 0 8px 22px rgba(10, 24, 56, .10);
  --radius: 22px;
  --top-h: 68px;
  --dock-h: 0px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 400 16px/1.6 "Manrope", system-ui, sans-serif; overflow-x: hidden;
  background-color: var(--ivory); }
body.locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.08; }
p { margin: 0; }
svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex: 0 0 auto; }
.wa-ico { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
em { font-style: italic; }
.eyebrow { font: 800 11.5px/1.2 "Manrope", sans-serif; letter-spacing: 2.6px; text-transform: uppercase; color: var(--emerald); }

/* mármore: veios gerados por ruído (SVG) por cima do marfim */
.hall, .salao, .sala-res, .endereco {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0028 .0075' numOctaves='5' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .53 0 0 0 0 .38 -9 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.38'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,255,255,.55), transparent 70%);
  background-size: 900px 900px, 100% 100%; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0;
  font: 800 14.5px "Manrope", sans-serif; letter-spacing: .1px; white-space: nowrap; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, .chip:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--gold-1); outline-offset: 3px; }
.btn-sm { min-height: 40px; padding: 0 15px; font-size: 13px; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn-emerald { color: #fff; background: linear-gradient(180deg, #1fb866, var(--emerald) 75%); box-shadow: 0 10px 24px rgba(13,122,69,.32), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-emerald:hover { box-shadow: 0 16px 32px rgba(13,122,69,.38), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-gold { color: #2a1a02; background: var(--gold-grad); box-shadow: 0 10px 26px rgba(168,115,15,.35), inset 0 1px 0 rgba(255,255,255,.7); }
.btn-navy { color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy)); box-shadow: 0 10px 22px rgba(10,24,56,.25); }
.btn-line { color: var(--navy); background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1.5px rgba(10,24,56,.18); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--gold), 0 10px 22px rgba(10,24,56,.1); }
.btn-ghost-light { color: #dfe6f7; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(10,24,56,.06); color: var(--navy); }

/* ================= PORTÃO ================= */
.gate { position: fixed; inset: 0; z-index: 100; perspective: 1600px; overflow: hidden; }
.gate-night { position: absolute; inset: 0; transition: opacity 1.4s ease .25s;
  background: radial-gradient(ellipse 60% 45% at 50% 42%, rgba(241,207,115,.22), transparent 70%),
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 9%, #fff, transparent), radial-gradient(1.5px 1.5px at 71% 14%, #fff, transparent),
    radial-gradient(1px 1px at 86% 26%, #fff, transparent), radial-gradient(1px 1px at 44% 6%, #fff, transparent), radial-gradient(1.2px 1.2px at 62% 31%, #fff, transparent),
    linear-gradient(180deg, #040b1f 0%, #0a1838 55%, #13285a 100%); }
.gate-leaves { position: absolute; inset: 0; transform-style: preserve-3d; }
.leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; transition: transform 1.7s cubic-bezier(.6,.02,.2,1), opacity 1.2s ease .6s; }
.leaf-l { left: 0; transform-origin: left center; }
.leaf-r { right: 0; transform-origin: right center; }
.leaf-r .leaf-art { transform: scaleX(-1); }
.leaf-art { position: absolute; inset: 0; filter: drop-shadow(0 0 1px rgba(0,0,0,.6)) drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
/* barras: período de 64 px, alinhado pelo centro (lado direito da folha esquerda) */
.leaf .bars { position: absolute; left: 0; right: 0; top: 21vh; bottom: 0;
  background: repeating-linear-gradient(90deg, transparent 0 46px, #6d4708 46px, #f1cf73 50px, #fff3c4 52px, #c8962e 56px, #6d4708 60px, transparent 60px 64px);
  background-position: right top; }
.leaf .spears { position: absolute; left: 0; right: 0; top: calc(21vh - 34px); height: 36px; background-position: right bottom; background-repeat: repeat-x; background-size: 64px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='36'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236d4708'/%3E%3Cstop offset='.45' stop-color='%23fff3c4'/%3E%3Cstop offset='1' stop-color='%23a8730f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M53 0 L61 18 L56 18 L56 36 L50 36 L50 18 L45 18 Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
.leaf .rail { position: absolute; left: 0; right: 0; height: 14px; border-radius: 3px; background: linear-gradient(180deg, #fff3c4, #e2b65a 40%, #a8730f 75%, #5d3e06); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.leaf .r1 { top: 21vh; } .leaf .r2 { top: 63%; } .leaf .r3 { bottom: 26px; }
.leaf .rings { position: absolute; left: 0; right: 0; top: calc(63% + 14px); height: 64px; background-position: right top; background-repeat: repeat-x; background-size: 64px 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='22' fill='none' stroke='%23d9a540' stroke-width='5'/%3E%3Ccircle cx='32' cy='32' r='7' fill='%23f1cf73'/%3E%3C/svg%3E"); }
.leaf .stile { position: absolute; top: calc(21vh - 6px); bottom: 0; right: 0; width: 20px; background: linear-gradient(90deg, #5d3e06, #e2b65a 35%, #fff3c4 50%, #c8962e 70%, #5d3e06); }
.gate-crest { position: absolute; left: 50%; top: max(8px, 2vh); width: min(900px, 96vw); transform: translateX(-50%); filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); transition: transform 1.2s ease, opacity .9s ease; }
.gate-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: calc(min(900px, 96vw) * .2 + 10px) 16px 24px; }
.gate-lock { width: clamp(150px, 31vh, 300px); aspect-ratio: 1; border-radius: 50%; transition: transform 1.3s cubic-bezier(.5,0,.2,1), opacity 1s ease, filter 1s ease;
  filter: drop-shadow(0 0 40px rgba(241,207,115,.45)) drop-shadow(0 20px 30px rgba(0,0,0,.6)); animation: lock-breathe 4s ease-in-out infinite; }
.gate-lock img { width: 100%; height: 100%; }
@keyframes lock-breathe { 50% { transform: scale(1.025); } }
.gate-plaque { width: min(560px, 100%); padding: 22px 24px 18px; border-radius: 22px; text-align: center; color: #e9eefb; transition: opacity .6s ease, transform .8s ease;
  background: linear-gradient(180deg, rgba(10,24,56,.86), rgba(4,11,31,.92)); border: 1px solid rgba(241,207,115,.45); box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.gate-plaque h1 { font: 700 clamp(28px, 4.4vw, 40px)/1.05 "Cormorant Garamond", serif; color: #fff; }
.gate-plaque h1 em { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-plaque p { margin-top: 8px; color: #bfcae6; }
.gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.gate-denied { color: #ffd2d2 !important; }
.gate-denied a { text-decoration: underline; }
.gate-plaque small { display: block; margin-top: 12px; color: #8f9cc0; font-size: 12px; }
/* abrindo */
.gate.opening .leaf-l { transform: rotateY(98deg); opacity: 0; }
.gate.opening .leaf-r { transform: rotateY(-98deg); opacity: 0; }
.gate.opening .gate-night { opacity: 0; }
.gate.opening .gate-crest { transform: translate(-50%, -60px); opacity: 0; }
.gate.opening .gate-plaque { opacity: 0; transform: translateY(30px); }
.gate.opening .gate-lock { animation: none; transform: scale(1.9); opacity: 0; filter: blur(6px); }
.gate.quick .leaf { transition-duration: 1.15s, .8s; transition-delay: 0s, .35s; }
.gate.quick .gate-night { transition-duration: .9s; transition-delay: .1s; }
.gate.quick .gate-plaque { display: none; }
.gate.gone { display: none; }

/* ================= CABEÇALHO ================= */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--top-h); display: flex; align-items: center; gap: 14px; padding: 0 max(18px, calc((100vw - 1280px) / 2));
  transition: background .3s, box-shadow .3s; }
.top.scrolled { background: rgba(247,242,232,.86); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(10,24,56,.06); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 4px 12px rgba(10,24,56,.25); }
.brand strong { display: block; font: 700 22px/1 "Cormorant Garamond", serif; color: var(--navy); }
.brand small { display: block; font: 700 10.5px "Manrope", sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--emerald); }
.top-nav { display: flex; gap: 4px; margin-left: auto; }
.top-nav a { padding: 8px 13px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--navy-2); transition: background .2s; }
.top-nav a:hover, .top-nav a.on { background: rgba(13,122,69,.1); color: var(--emerald); }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font: 700 12.5px "Manrope", sans-serif; color: var(--navy-2); background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.status-pill i { width: 9px; height: 9px; border-radius: 50%; background: #9aa3b8; }
.status-pill.open i { background: var(--emerald-2); box-shadow: 0 0 0 0 rgba(25,168,91,.6); animation: ping 2s infinite; }
.status-pill.open { color: var(--emerald); }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(25,168,91,0); } 100% { box-shadow: 0 0 0 0 rgba(25,168,91,0); } }

/* ================= PLANTA DA VILLA (navegação) ================= */
.plan { position: fixed; right: 18px; top: 50%; z-index: 40; transform: translateY(-50%); width: 84px; padding: 10px 8px 8px; border-radius: 16px; text-align: center;
  background: rgba(255,253,248,.82); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); transition: opacity .4s, width .3s; }
.plan > p { font: 800 8.5px "Manrope", sans-serif; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.plan svg { width: 100%; height: auto; display: block; }
.plan .room { fill: rgba(10,24,56,.04); stroke: rgba(10,24,56,.35); stroke-width: 2; cursor: pointer; transition: fill .3s, stroke .3s; }
.plan .room:hover { fill: rgba(200,150,46,.2); }
.plan .room.on { fill: var(--emerald-2); stroke: var(--gold); }
.plan .door { stroke: var(--ivory); stroke-width: 4; }
.plan ul { position: absolute; right: calc(100% + 8px); top: 30px; margin: 0; padding: 0; list-style: none; text-align: right; opacity: 0; pointer-events: none; transition: opacity .25s; }
.plan:hover ul, .plan:focus-within ul { opacity: 1; pointer-events: auto; }
.plan li a { display: inline-block; margin: 0 0 6px; padding: 5px 11px; border-radius: 999px; font: 700 12px "Manrope", sans-serif; color: var(--navy); background: var(--paper); box-shadow: var(--shadow-sm); white-space: nowrap; }
.plan li a.on { color: #fff; background: var(--emerald); }
.plan.hide { opacity: 0; pointer-events: none; }

/* ================= HALL ================= */
.hall { position: relative; overflow: hidden; min-height: max(640px, 100svh); padding: calc(var(--top-h) + 30px) 0 60px; }
.hall-light { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 55% at 72% 46%, rgba(241,207,115,.32), transparent 70%), radial-gradient(ellipse 50% 40% at 10% 0%, rgba(25,168,91,.10), transparent 70%),
    linear-gradient(180deg, transparent 70%, rgba(200,150,46,.10)); }
/* rodapé de parede: friso dourado e piso */
.hall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--gold-grad); opacity: .7; }
.hall-in { position: relative; width: min(1280px, calc(100% - 40px)); margin: 0 auto; min-height: calc(max(640px, 100svh) - var(--top-h) - 90px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 30px 50px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; font: 700 12.5px "Manrope", sans-serif; color: var(--emerald); background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(13,122,69,.2); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-2); animation: ping 2s infinite; }
.hall h1 { margin-top: 18px; font: 700 clamp(54px, 7.6vw, 104px)/.92 "Cormorant Garamond", serif; color: var(--navy); letter-spacing: -1px; }
.hall h1 em { background: var(--gold-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gold-flow 6s linear infinite; padding-right: .06em; }
@keyframes gold-flow { to { background-position: -200% 0; } }
.lead { margin-top: 20px; max-width: 540px; font-size: 17.5px; color: #3c4562; }
.lead b { color: var(--emerald); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hall-facts { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.55fr) minmax(0, .9fr); gap: 0; margin: 34px 0 0; padding: 0; list-style: none; max-width: 640px; align-items: start;
  border-top: 1px solid var(--line); }
.hall-facts li { padding: 16px 14px 0 0; }
.hall-facts li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.hall-facts b { display: block; font: 700 30px/1.05 "Cormorant Garamond", serif; color: var(--navy); }
.hall-facts span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.hall-facts b.open { color: var(--emerald); }
/* destaque: o jogo MAIS ACUMULADO (cartão azul-noite com brilho da cor do jogo, valor em ouro que corre) */
.hall-facts li.hot { position: relative; padding: 0 14px 0 16px; margin-top: -10px; border-left: 0; }
/* fogo: canvas atrás do card (posição/tamanho calculados no app.js) */
.hot-fire { position: absolute; z-index: 0; pointer-events: none; }
.hot a { z-index: 1; }
.hall-facts:has(li.fire) { margin-top: 64px; }
/* METAL EM BRASA (dono 15/10): o card é uma placa quente. Borda incandescente com o ponto mais quente girando,
   bordas internas avermelhadas, ondas de calor passando por dentro e o valor com brilho de ouro aquecido. */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --hx { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
.hot.fire a { animation: metal-respira 4.6s ease-in-out infinite;
  background: radial-gradient(ellipse 120% 70% at 50% 120%, rgba(255,86,0,.34), transparent 60%),
    radial-gradient(ellipse 90% 90% at 100% 0%, color-mix(in srgb, var(--c, #209869) 45%, transparent), transparent 70%), linear-gradient(140deg, #0c1636, #1a2450 60%, #2a1a2a);
  box-shadow: 0 16px 34px rgba(10,24,56,.3), 0 0 16px rgba(255,90,10,.42), 0 0 42px rgba(255,60,0,.18),
    inset 0 0 0 1px rgba(255,190,110,.35), inset 0 0 20px rgba(255,84,8,.42), inset 0 -16px 26px -10px rgba(255,70,0,.5); }
@keyframes metal-respira {
  0%, 100% { box-shadow: 0 16px 34px rgba(10,24,56,.3), 0 0 16px rgba(255,90,10,.42), 0 0 42px rgba(255,60,0,.18), inset 0 0 0 1px rgba(255,190,110,.35), inset 0 0 20px rgba(255,84,8,.42), inset 0 -16px 26px -10px rgba(255,70,0,.5); }
  50% { box-shadow: 0 16px 34px rgba(10,24,56,.3), 0 0 22px rgba(255,110,20,.55), 0 0 56px rgba(255,70,0,.26), inset 0 0 0 1px rgba(255,210,140,.5), inset 0 0 26px rgba(255,100,14,.55), inset 0 -20px 30px -10px rgba(255,90,4,.62); }
}
/* borda incandescente: anel de 2 px; o trecho mais quente (branco-amarelo) dá a volta devagar */
.hot.fire a::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--ang), #5a0d00, #c42a00 12%, #ff6a00 22%, #ffb347 30%, #fff2cf 35%, #ffb347 40%, #ff6a00 48%, #c42a00 60%, #7a1500 75%, #c42a00 88%, #5a0d00);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: brasa-gira 7s linear infinite; filter: drop-shadow(0 0 3px rgba(255,120,30,.9)); }
@keyframes brasa-gira { to { --ang: 360deg; } }
/* ondas de calor passando por dentro do metal */
.hot.fire a::after { top: 0; bottom: 0; left: 0; width: 100%; transform: none; z-index: -1; mix-blend-mode: screen; opacity: .9;
  background: radial-gradient(ellipse 38% 55% at var(--hx) 105%, rgba(255,120,30,.32), transparent 70%),
    radial-gradient(ellipse 30% 40% at calc(100% - var(--hx)) 0%, rgba(255,90,20,.18), transparent 70%);
  animation: calor-onda 6.5s ease-in-out infinite alternate; }
@keyframes calor-onda { from { --hx: 12%; } to { --hx: 88%; } }
.hot.fire .hot-tag { background: linear-gradient(180deg, #fff1cf, #ffc06a 50%, #ff8a3a); box-shadow: 0 0 12px rgba(255,120,30,.5), 0 4px 10px rgba(0,0,0,.25); }
.hall-facts .hot.fire b { background: linear-gradient(180deg, #fff6dc 0%, #ffd27a 40%, #ff9d3a 75%, #e8641a 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255,120,30,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.4)); animation: metal-texto 4.6s ease-in-out infinite; }
@keyframes metal-texto { 50% { filter: drop-shadow(0 0 16px rgba(255,140,40,.65)) drop-shadow(0 2px 4px rgba(0,0,0,.4)); } }
.hall-facts li.hot + li { border-left: 1px solid var(--line); }
.hot a { position: relative; display: block; padding: 12px 14px 12px; border-radius: 18px; overflow: hidden; isolation: isolate; color: #fff; text-align: left;
  background: radial-gradient(ellipse 90% 90% at 100% 0%, color-mix(in srgb, var(--c, #209869) 55%, transparent), transparent 70%), linear-gradient(140deg, #0a1838, #13285a);
  box-shadow: 0 16px 34px rgba(10,24,56,.3), 0 0 0 1px rgba(241,207,115,.65), 0 0 28px color-mix(in srgb, var(--c, #209869) 45%, transparent); transition: transform .25s, box-shadow .25s;
  animation: hot-glow 3.2s ease-in-out infinite; }
.hot a:hover { transform: translateY(-3px) scale(1.015); }
@keyframes hot-glow { 50% { box-shadow: 0 18px 38px rgba(10,24,56,.32), 0 0 0 1px rgba(241,207,115,.9), 0 0 44px color-mix(in srgb, var(--c, #209869) 70%, transparent); } }
.hot a::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -50%; width: 30%; z-index: -1; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255,243,196,.18), transparent); animation: vip-sweep 5s ease-in-out infinite 1s; }
.hot-tag { display: inline-flex !important; align-items: center; gap: 5px; margin: 0 !important; padding: 3px 9px; border-radius: 999px; font: 800 10px/1.2 "Manrope", sans-serif !important;
  letter-spacing: 1.3px; text-transform: uppercase; color: #2a1a02 !important; background: var(--gold-grad); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.hot-tag svg.lucide { width: 13px; height: 13px; color: #b4231c; animation: flame 1.2s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scale(1.18) rotate(-6deg); } }
.hall-facts .hot b { margin-top: 4px; font: 700 42px/1 "Cormorant Garamond", serif; background: var(--gold-grad); background-size: 100% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.hot-game { display: flex !important; align-items: center; gap: 8px; margin-top: 8px !important; font-size: 12px !important; font-weight: 700; color: #d5ddf2 !important; flex-wrap: wrap; }
.hot-game strong { font: 800 16px "Manrope", sans-serif; color: #fff; letter-spacing: .2px; }
.hot-when { display: block; margin-top: 4px !important; font-size: 12px !important; font-weight: 700; color: #c3cde8 !important; }
.hot-game img { height: 22px; width: auto; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.hot-go { display: inline-flex !important; align-items: center; gap: 4px; margin-top: 6px !important; font-size: 12px !important; font-weight: 800; color: var(--gold-1) !important; }
.hot-go svg.lucide { width: 14px; height: 14px; transition: transform .2s; }
.hot a:hover .hot-go svg.lucide { transform: translateX(3px); }

/* ---------- BOLÃO VIP (cota mais cara da casa): passe de veludo azul-noite com moldura de ouro ---------- */
.vip { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; max-width: 640px; margin-bottom: 24px;
  padding: 14px 16px 14px 14px; border-radius: 22px; color: #fff; overflow: hidden; isolation: isolate; animation: tk-in .7s cubic-bezier(.2,.8,.2,1) both;
  background: radial-gradient(ellipse 60% 120% at 0% 0%, color-mix(in srgb, var(--c, #0d7a45) 35%, transparent), transparent 70%), linear-gradient(135deg, #0a1838 0%, #13285a 55%, #0a1838 100%);
  box-shadow: 0 22px 44px rgba(10,24,56,.3), inset 0 0 0 1.5px rgba(241,207,115,.7), inset 0 0 0 5px rgba(10,24,56,.9), inset 0 0 0 6px rgba(241,207,115,.3); }
.vip::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -40%; width: 22%; z-index: -1; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,243,196,.16) 50%, transparent); animation: vip-sweep 6s ease-in-out infinite 1.5s; }
@keyframes vip-sweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.vip-seal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #2a1a02; background: var(--gold-grad);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.35), inset 0 -4px 8px rgba(109,71,8,.35); animation: lock-breathe 4s ease-in-out infinite; }
.vip-seal b { font: 700 23px/1 "Cormorant Garamond", serif; letter-spacing: 1px; }
.vip-seal small { font: 800 8.5px/1.3 "Manrope", sans-serif; letter-spacing: 1.6px; text-transform: uppercase; }
.vip-info { min-width: 0; }
.vip-eyebrow { font: 800 10.5px "Manrope", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-1); }
.vip-line { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 12.5px; font-weight: 700; color: #c9d3ec; flex-wrap: wrap; }
.vip-line img { height: 24px; width: auto; border-radius: 6px; }
.vip-prize { display: block; margin-top: 4px; font: 700 30px/1.05 "Cormorant Garamond", serif; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vip-meta { margin-top: 3px; font-size: 12.5px; color: #aebbdc; }
.vip-buy { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.vip-price small { display: block; font: 800 9.5px "Manrope", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #aebbdc; }
.vip-price b { font: 800 22px/1.1 "Manrope", sans-serif; color: #fff; }
.vip-wa { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; color: #9fe7bf; }
.vip-wa .wa-ico { width: 14px; height: 14px; }
.vip-wa:hover { color: #fff; }
/* coluna estreita (tablet, notebook pequeno, celular): selo + texto em cima, preço e botão embaixo */
.hall-copy { container-type: inline-size; }
@container (max-width: 540px) {
  .vip { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .vip-seal { width: 54px; height: 54px; }
  .vip-seal b { font-size: 19px; }
  .vip-prize { font-size: 26px; }
  .vip-buy { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; text-align: left;
    padding-top: 10px; border-top: 1px solid rgba(241,207,115,.22); }
  .vip-wa { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- moeda 3D ---------- */
.hall-coin { display: flex; flex-direction: column; align-items: center; }
.coin-stage { position: relative; width: min(470px, 100%); aspect-ratio: 1; perspective: 1500px; cursor: grab; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; }
.coin-stage:active { cursor: grabbing; }
.coin-stage:focus-visible .coin { filter: drop-shadow(0 0 0 3px var(--gold-1)); }
.coin { position: absolute; inset: 6%; transform-style: preserve-3d; --ry: 0deg; --rx: 0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform; }
.coin-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.coin-face.front { transform: translateZ(9px); box-shadow: 0 0 0 2px rgba(138,91,12,.5); }
.coin-face.front img { width: 100%; height: 100%; }
.coin-face.back { transform: rotateY(180deg) translateZ(9px); display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #fff6d4 0%, #f1cf73 30%, #d9a540 62%, #a8730f 88%, #6d4708 100%); box-shadow: inset 0 0 0 10px rgba(109,71,8,.35), inset 0 0 40px rgba(109,71,8,.4); }
.coin-face.back svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.coin-face.back img { width: 54%; height: 54%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
/* espessura: discos dourados empilhados (app.js cria 9, de -8 a +8 px); de lado formam a borda */
.coin-edge { display: none; }
.coin-layer { position: absolute; inset: .4%; border-radius: 50%; background: radial-gradient(circle, #7a520c 60%, #c8962e 88%, #f1cf73 96%, #8a5b0c 100%); }
.coin-shadow { position: absolute; left: 18%; right: 18%; bottom: -2%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,24,56,.35), transparent); filter: blur(4px); transition: transform .3s; }
.coin-btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0;
  font: 800 14.5px "Manrope", sans-serif; color: #2a1a02; background: var(--gold-grad); box-shadow: 0 12px 28px rgba(168,115,15,.32), inset 0 1px 0 rgba(255,255,255,.7); }
.coin-btn:hover { transform: translateY(-2px); }
.coin-hint { margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* ---------- palpite ---------- */
.palpite { position: relative; width: min(1280px, calc(100% - 40px)); margin: 10px auto 0; animation: tear .7s cubic-bezier(.2,.8,.2,1); }
@keyframes tear { from { opacity: 0; transform: translateY(-24px) scaleY(.85); } }
.palpite-in { position: relative; max-width: 760px; margin: 0 auto; padding: 22px 24px 18px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow);
  border: 1px dashed rgba(200,150,46,.55); }
.palpite-in::before, .palpite-in::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--ivory); box-shadow: inset 0 0 0 1px rgba(200,150,46,.4); }
.palpite-in::before { left: -12px; } .palpite-in::after { right: -12px; }
.palpite-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.palpite-head .eyebrow { width: 100%; }
.palpite-head h3 { font: 700 28px "Cormorant Garamond", serif; color: var(--navy); }
.palpite-head .icon-btn { margin-left: auto; margin-top: -30px; }
.palpite-games { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.palpite-balls { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; min-height: 52px; }
.palpite-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pal-extra { align-self: center; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font: 800 13px "Manrope", sans-serif;
  color: var(--gold-3); background: rgba(241,207,115,.22); box-shadow: inset 0 0 0 1.5px rgba(200,150,46,.45); animation: ball-in .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i, 8) * 70ms); }
.palpite small { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; }

/* bola de número (palpite e resultados) */
.ball { --c: var(--navy-3); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 16px "Manrope", sans-serif; color: var(--navy);
  background: radial-gradient(circle at 35% 30%, #fff 0%, #fbf6ea 40%, #e6dcc6 100%); box-shadow: inset 0 -3px 6px rgba(0,0,0,.12), 0 6px 14px rgba(10,24,56,.14), 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent);
  animation: ball-in .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.ball.hit { color: #2a1a02; background: radial-gradient(circle at 35% 30%, #fff8dc 0%, #f1cf73 45%, #c8962e 100%); box-shadow: inset 0 -3px 6px rgba(109,71,8,.35), 0 0 0 3px var(--emerald-2), 0 8px 20px rgba(200,150,46,.5); }
.ball.trevo { border-radius: 30% 70% 30% 70%; color: #fff; background: radial-gradient(circle at 35% 30%, #4fdc8c, var(--emerald)); box-shadow: 0 6px 14px rgba(13,122,69,.3); }
@keyframes ball-in { from { opacity: 0; transform: translateY(-14px) scale(.6); } }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 0; font: 700 13.5px "Manrope", sans-serif; color: var(--navy-2);
  background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1.5px rgba(10,24,56,.14); transition: background .2s, box-shadow .2s, color .2s, transform .2s; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--gold); transform: translateY(-1px); }
.chip[aria-checked="true"], .chip[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, #1fb866, var(--emerald)); box-shadow: 0 8px 18px rgba(13,122,69,.28); }
.chip small { font-weight: 800; opacity: .7; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--gold)); box-shadow: 0 0 0 2px rgba(255,255,255,.8); }

/* ================= SAGUÃO: QUADRO SPLIT-FLAP ================= */
.saguao { position: relative; padding: 90px 20px 80px; color: #e6ecfa; overflow: hidden;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(241,207,115,.14), transparent 70%), linear-gradient(180deg, var(--navy) 0%, #071230 100%); }
.saguao::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(241,207,115,.05) 120px 121px); }
.sec-head { position: relative; max-width: 760px; margin: 0 auto 36px; text-align: center; }
.sec-head h2 { margin-top: 10px; font: 700 clamp(40px, 5.4vw, 66px)/1 "Cormorant Garamond", serif; color: var(--navy); }
.sec-head h2 em { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
.sec-head > p:last-child { margin-top: 14px; color: var(--muted); font-size: 16.5px; }
.sec-head.light h2 { color: #fff; }
.sec-head.light h2 em { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; }
.sec-head.light .eyebrow { color: var(--gold-1); }
.sec-head.light > p:last-child { color: #a9b6d6; }
.board { position: relative; width: min(1120px, 100%); margin: 0 auto; padding: 18px; border-radius: 20px;
  background: linear-gradient(180deg, #1a1d24, #0e1014); box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 6px #2a2d35, 0 0 0 7px rgba(241,207,115,.35); }
.board-cap, .brow { display: grid; grid-template-columns: 12fr 4fr 9fr 9fr 3fr; gap: 0 16px; align-items: center; }
.board-cap { padding: 0 12px 10px; font: 800 11px "Manrope", sans-serif; letter-spacing: 2px; color: var(--gold-1); opacity: .85; }
.brow { position: relative; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; transition: background .2s; }
.brow + .brow { margin-top: 4px; }
.brow:hover { background: rgba(255,255,255,.04); }
.brow::before { content: ""; position: absolute; left: -2px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #3a3f4a; }
.brow.has::before { background: var(--emerald-2); box-shadow: 0 0 8px var(--emerald-2); }
.flaps { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.flap { position: relative; flex: 1 1 0; min-width: 0; max-width: 30px; aspect-ratio: 5 / 7; display: grid; place-items: center; border-radius: 3px;
  font: 800 clamp(11px, 1.55vw, 19px)/1 "JetBrains Mono", monospace; color: #f4efe2; background: linear-gradient(180deg, #2b2f38 0 49%, #20232a 51% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.6); }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.65); }
.flap.roll { animation: flip .07s linear; }
@keyframes flip { 50% { transform: scaleY(.15); } }
.flaps.prize .flap { color: var(--gold-1); }
.flaps.count .flap { color: #7cf0ae; }
.board-wait { padding: 30px; text-align: center; color: #8d97ad; }
.board-foot { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 13px; color: #8f9cc0; text-align: center; }

/* ================= SALÃO DOS BOLÕES ================= */
.salao { padding: 90px 20px 80px; }
.concierge { width: min(1120px, 100%); margin: 0 auto; display: grid; gap: 14px; padding: 22px; border-radius: 26px; background: rgba(255,253,248,.82); box-shadow: var(--shadow), inset 0 0 0 1px rgba(200,150,46,.25); }
.q { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.q + .q { padding-top: 14px; border-top: 1px dashed rgba(10,24,56,.12); }
.q-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 22px "Cormorant Garamond", serif; color: #2a1a02; background: var(--gold-grad); box-shadow: 0 6px 14px rgba(168,115,15,.3); }
.q h3 { font: 700 23px "Cormorant Garamond", serif; color: var(--navy); margin: 6px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.salao-bar { width: min(1120px, 100%); margin: 30px auto 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.salao-bar p { font: 700 22px "Cormorant Garamond", serif; color: var(--navy); }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--emerald); }
.sync svg { width: 15px; height: 15px; }
.tickets { width: min(1120px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 1100px) { .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.more-wrap { text-align: center; margin-top: 26px; }
.how { width: min(1120px, 100%); margin: 30px auto 0; padding: 14px 20px; border-radius: 16px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: #3c4562; }
.how summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 800; color: var(--navy); }
.how p { margin-top: 10px; }
.empty { grid-column: 1 / -1; padding: 40px 20px; text-align: center; border-radius: 20px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--line); }
.empty strong { display: block; font: 700 26px "Cormorant Garamond", serif; color: var(--navy); }
.empty p { margin: 6px 0 16px; color: var(--muted); }

/* ---------- bilhete (card do bolão) ---------- */
.tk { --c: var(--emerald); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 200px; border-radius: 20px; background: var(--paper);
  box-shadow: 0 18px 40px rgba(10,24,56,.12), inset 0 0 0 1px rgba(10,24,56,.06); animation: tk-in .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes tk-in { from { opacity: 0; transform: translateY(18px); } }
.tk-main { position: relative; padding: 18px 20px 18px; min-width: 0; }
.tk-main::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 5px; border-radius: 0 5px 5px 0; background: var(--c); }
.tk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-art { height: 34px; width: auto; border-radius: 8px; }
.tk-name { font: 800 16px "Manrope", sans-serif; color: var(--c); }
.tk-when { margin-left: auto; font: 700 12.5px "Manrope", sans-serif; color: var(--muted); }
.tk-when.today { color: #b4231c; }
.tk-prize small, .tk-cota small { display: block; font: 800 10.5px "Manrope", sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.tk-prize { margin-top: 14px; }
.tk-prize b { font: 700 36px/1 "Cormorant Garamond", serif; color: var(--navy); }
.tk-cota { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(241,207,115,.22), rgba(241,207,115,.05)); box-shadow: inset 0 0 0 1px rgba(200,150,46,.3); }
.tk-cota b { font: 800 19px "Manrope", sans-serif; color: var(--gold-3); }
.tk-odds { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: #3c4562; }
.tk-odds .odds-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--emerald); background: var(--emerald-3); }
.tk-odds b { color: var(--navy); }
.tk-odds em { font-style: normal; font-weight: 800; color: var(--emerald); }
.tk-meta { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.tk-stub { position: relative; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; border-left: 2px dashed rgba(10,24,56,.14); border-radius: 0 20px 20px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #fff), #fff); }
.tk-stub::before, .tk-stub::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ivory); }
.tk-stub::before { top: -11px; } .tk-stub::after { bottom: -11px; }
.tk-price small { display: block; font: 800 10.5px "Manrope", sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.tk-price b { font: 800 26px/1.1 "Manrope", sans-serif; color: var(--navy); }
.tk-left { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
/* pote de moedas (enche com a % de cotas vendidas) */
.tk-jar { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.tk-jar .jar { flex: 0 0 auto; width: 92px; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(10,24,56,.12)); }
.jar .cn { opacity: 0; }
.jar.pour .cn { animation: coin-drop .6s cubic-bezier(.45,0,.7,1.35) both; animation-delay: var(--d); }
@keyframes coin-drop { 0% { opacity: 0; transform: translateY(-96px); } 12% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.jar-pct > b { display: block; font: 800 27px/1 "Manrope", sans-serif; color: var(--navy); }
.jar-pct small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.25; }
.tk-left b { color: var(--navy); }
.tk-bar { height: 7px; border-radius: 9px; background: rgba(10,24,56,.08); overflow: hidden; }
.tk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff)); }
.tk-stub .btn { min-height: 42px; padding: 0 12px; font-size: 13px; width: 100%; }
.tk-stub .btn + .btn { margin-top: -2px; }
.tk-rib { position: absolute; top: -12px; left: 20px; z-index: 1; padding: 5px 12px; border-radius: 999px; font: 800 11px "Manrope", sans-serif; letter-spacing: 1px; text-transform: uppercase;
  color: #2a1a02; background: var(--gold-grad); box-shadow: 0 6px 14px rgba(168,115,15,.35); }
.tk-rib.r1 { color: #fff; background: linear-gradient(180deg, #1fb866, var(--emerald)); box-shadow: 0 6px 14px rgba(13,122,69,.35); }
.tk.pick { box-shadow: 0 22px 46px rgba(10,24,56,.16), 0 0 0 2px rgba(200,150,46,.55); }

/* ================= MEGA DA VIRADA (mesma seção dos outros sites, cores da Villa) ================= */
.virada { position: relative; overflow: hidden; padding: 110px 20px; text-align: center; color: #fff;
  background: radial-gradient(ellipse 55% 60% at 50% 42%, rgba(25,168,91,.32) 0%, transparent 70%),
    radial-gradient(ellipse 70% 80% at 50% 40%, #13285a 0%, #0a1838 55%, #040a1d 100%); }
.virada::before { content: "2027"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 min(38vw, 460px) "Cormorant Garamond", serif; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(241,207,115,.16); pointer-events: none; }
.virada::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gold-grad); opacity: .75; }
.virada-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.virada-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.virada .eyebrow { color: var(--gold-1); }
.virada h2 { font: 700 clamp(52px, 9vw, 116px)/1 "Cormorant Garamond", serif; }
.virada h2 span { color: #f7f2e8; }
.virada h2 strong { font-style: italic; background: var(--gold-text); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gold-flow 6s linear infinite; filter: drop-shadow(0 4px 0 #5d3e06); padding-right: .06em; }
.virada-prize small { display: block; color: #9fe7bf; font: 800 12px "Manrope", sans-serif; letter-spacing: 2.4px; text-transform: uppercase; }
.virada-prize b { font: 700 clamp(40px, 5.6vw, 66px) "Cormorant Garamond", serif; color: var(--gold-1); text-shadow: 0 0 40px rgba(241,207,115,.35); }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(74px, 104px)); gap: 12px; }
.countdown div { padding: 14px 6px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  border: 1px solid rgba(241,207,115,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 14px 30px rgba(0,0,0,.35), 0 0 24px rgba(25,168,91,.12); }
.countdown b { display: block; font: 800 clamp(28px, 4vw, 44px) "Manrope", sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
.countdown small { color: #9fe7bf; font: 700 10.5px "Manrope", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }

/* ================= SALA DOS RESULTADOS ================= */
.sala-res { padding: 90px 20px 80px; border-top: 1px solid var(--line); }
.res-tabs { width: min(1120px, 100%); margin: 0 auto 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 2px 10px; }
.res-tabs .chip { flex: 0 0 auto; }
.res-panel { width: min(1120px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.res-wait { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--muted); }
.res-card, .res-check { padding: 24px; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow), inset 0 0 0 1px rgba(10,24,56,.05); min-width: 0; }
.res-card { --c: var(--emerald); border-top: 6px solid var(--c); }
.res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-head img { height: 40px; width: auto; border-radius: 9px; }
.res-head h3 { font: 700 30px "Cormorant Garamond", serif; color: var(--navy); }
.res-head span { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
.res-balls { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 6px; }
.res-sub { margin-top: 14px; font: 800 11px "Manrope", sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.res-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.res-facts div { padding: 12px 14px; border-radius: 14px; background: var(--ivory); }
.res-facts small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.res-facts b { display: block; margin-top: 2px; font-size: 15.5px; color: var(--navy); }
.res-facts .acc b { color: #b4231c; }
.res-list { margin: 16px 0 0; padding: 0; list-style: none; }
.res-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.res-list li b { font-family: "JetBrains Mono", monospace; color: var(--navy); }
.res-check h4 { margin: 0; font: 700 26px "Cormorant Garamond", serif; color: var(--navy); }
.res-check p { margin-top: 6px; color: var(--muted); font-size: 14px; }
.res-check input { width: 100%; margin-top: 14px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 0; font: 700 17px "JetBrains Mono", monospace; letter-spacing: 1px; color: var(--navy);
  background: var(--ivory); box-shadow: inset 0 0 0 1.5px rgba(10,24,56,.14); }
.res-check input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--emerald-2); }
.res-verdict { margin-top: 14px; padding: 14px 16px; border-radius: 14px; font-size: 15px; background: var(--ivory); color: #3c4562; min-height: 52px; }
.res-verdict.win { color: #0b5a33; background: var(--emerald-3); box-shadow: inset 0 0 0 1.5px rgba(25,168,91,.4); }
.res-verdict b { color: var(--navy); }
.res-check .btn { margin-top: 14px; }

/* ================= ENDEREÇO ================= */
.endereco { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; width: 100%; padding: 90px max(20px, calc((100vw - 1120px) / 2)) 90px; border-top: 1px solid var(--line); }
.end-card h2 { margin-top: 10px; font: 700 clamp(38px, 4.6vw, 56px)/1 "Cormorant Garamond", serif; color: var(--navy); }
.end-card h2 em { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.end-city { margin-top: 6px; font-weight: 700; color: var(--muted); }
.open-now { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-sm); }
.open-now i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #9aa3b8; }
.open-now.open i { background: var(--emerald-2); animation: ping 2s infinite; }
.open-now b { display: block; font: 700 22px "Cormorant Garamond", serif; color: var(--navy); }
.open-now.open b { color: var(--emerald); }
.open-now small { color: var(--muted); font-size: 13px; }
.hours { margin: 14px 0 0; padding: 0; list-style: none; }
.hours li { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px dashed var(--line); font-size: 14.5px; color: #3c4562; }
.hours li.today { font-weight: 800; color: var(--navy); }
.hours li.today span:first-child::after { content: " · hoje"; color: var(--emerald); }
.end-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* cartão-postal */
.postcard { position: relative; min-height: 380px; border-radius: 10px; background: #fffdf6; transform: rotate(1.2deg); transition: transform .4s;
  box-shadow: 0 30px 60px rgba(10,24,56,.18), 0 2px 0 #e9dfc7, inset 0 0 0 10px #fffdf6, inset 0 0 0 11px rgba(200,150,46,.35); overflow: hidden; }
.postcard:hover { transform: rotate(0deg); }
.postcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(200,150,46,.0) 14px 28px); }
.pc-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 380px; padding: 30px; gap: 26px; }
.pc-left { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-right: 26px; border-right: 1.5px solid rgba(10,24,56,.12); }
.pc-title { font: 700 40px/1 "Cormorant Garamond", serif; color: var(--navy); }
.pc-title em { color: var(--emerald); }
.pc-msg { font: italic 600 20px/1.35 "Cormorant Garamond", serif; color: #3c4562; }
.pc-left small { color: var(--muted); font-size: 12px; }
.pc-left .btn { align-self: flex-start; }
.pc-right { position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.pc-stamp { position: absolute; top: 4px; right: 4px; width: 104px; padding: 7px 7px 5px; background: #fff; text-align: center; transform: rotate(4deg); box-shadow: 0 6px 14px rgba(10,24,56,.12); }
/* serrilha do selo: anel de furinhos em volta (só a borda; o miolo é coberto pelo fundo branco do selo) */
.pc-stamp::before { content: ""; position: absolute; inset: -5px; z-index: -1; background: radial-gradient(circle, transparent 3px, #fff 3.5px) -5px -5px / 10px 10px; }
.pc-stamp img { width: 100%; height: auto; aspect-ratio: 1; background: var(--navy); padding: 6px; }
.pc-stamp span { display: block; margin-top: 4px; font: 800 8.5px "Manrope", sans-serif; letter-spacing: 1px; color: var(--navy); }
.pc-postmark { position: absolute; top: 44px; right: 122px; width: 104px; height: 104px; border-radius: 50%; border: 2.5px solid rgba(13,122,69,.55); display: grid; place-content: center; text-align: center;
  color: rgba(13,122,69,.75); transform: rotate(-14deg); font: 800 9.5px "Manrope", sans-serif; letter-spacing: 1px; }
.pc-postmark::before, .pc-postmark::after { content: ""; position: absolute; left: -70px; width: 64px; height: 0; border-top: 2.5px solid rgba(13,122,69,.4); }
.pc-postmark::before { top: 40px; } .pc-postmark::after { top: 56px; }
.pc-postmark b { font: 800 15px "JetBrains Mono", monospace; }
.pc-lines span { display: block; padding: 10px 0 4px; border-bottom: 1.5px solid rgba(10,24,56,.18); font: italic 600 19px "Cormorant Garamond", serif; color: var(--navy); }
.postcard iframe { position: absolute; inset: 11px; width: calc(100% - 22px); height: calc(100% - 22px); border: 0; border-radius: 4px; }

/* ================= RODAPÉ ================= */
.foot { padding: 60px 20px calc(40px + var(--dock-h)); text-align: center; color: #b9c4de; background: linear-gradient(180deg, var(--navy), #050c22); }
.foot-medal { width: 150px; height: 150px; margin: 0 auto; filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); }
.foot-sub { margin-top: 16px; font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 18px 0; font-weight: 700; font-size: 14px; color: #fff; }
.foot nav a:hover { color: var(--gold-1); }
.credit { display: inline-block; margin: 6px 0 14px; }
.credit img { width: 196px; height: auto; border-radius: 6px; }
.foot-legal { max-width: 860px; margin: 0 auto; font-size: 12px; line-height: 1.6; color: #7f8bab; }

/* ================= dock (celular) ================= */
.dock { display: none; }

/* ================= guia e toast ================= */
.guide { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.guide-bg { position: absolute; inset: 0; background: rgba(5,12,34,.6); backdrop-filter: blur(6px); }
.guide-card { position: relative; width: min(480px, 100%); max-height: calc(100svh - 32px); overflow: auto; padding: 26px 22px 20px; border-radius: 24px; background: var(--paper); box-shadow: 0 40px 90px rgba(0,0,0,.4); animation: tk-in .35s ease; }
.guide-x { position: absolute; top: 14px; right: 14px; }
.guide-card h3 { margin: 8px 0 14px; font: 700 30px "Cormorant Garamond", serif; color: var(--navy); }
.guide-ticket { --c: var(--emerald); padding: 14px 16px; border-radius: 14px; background: var(--ivory); border-left: 5px solid var(--c); }
.guide-ticket strong { display: block; font-size: 16px; color: var(--c); }
.guide-ticket div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.guide-ticket small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.guide-ticket b { font-size: 14px; color: var(--navy); }
.guide-steps { margin: 16px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.guide-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: #3c4562; }
.guide-steps b { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #2a1a02; background: var(--gold-grad); }
.guide-card .btn + .btn { margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--dock-h)); z-index: 90; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px;
  font-weight: 700; font-size: 14px; color: #fff; background: var(--navy); box-shadow: 0 20px 40px rgba(0,0,0,.3); animation: tk-in .3s ease; }

/* reveal ao rolar */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* ================= RESPONSIVO ================= */
@media (max-width: 1240px) { .plan { display: none; } }
@media (max-width: 1080px) {
  .top-nav { display: none; }
  .status-pill { margin-left: auto; }
}
@media (max-width: 900px) {
  .hall-in { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hall-coin { order: -1; }
  .coin-stage { width: min(360px, 82vw); }
  .kicker { font-size: 11.5px; }
  .lead { margin-left: auto; margin-right: auto; }
  .cta { justify-content: center; }
  .hall-facts { margin-left: auto; margin-right: auto; }
  .vip { margin: 0 auto 22px; text-align: left; }
  .tickets { grid-template-columns: minmax(0, 1fr); }
  .res-panel { grid-template-columns: minmax(0, 1fr); }
  .endereco { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --top-h: 60px; --dock-h: 74px; }
  .top { gap: 8px; padding: 0 12px; }
  .brand strong { font-size: 20px; }
  .brand img { width: 36px; height: 36px; }
  .top-wa, .top .caixa-link span { display: none; }
  .top .caixa-link { width: 40px; padding: 0; }
  .status-pill { padding: 6px 10px; font-size: 11.5px; }
  .hall { padding-top: calc(var(--top-h) + 14px); min-height: 0; }
  .hall-in { width: calc(100% - 32px); min-height: 0; gap: 18px; }
  .hall h1 { font-size: clamp(50px, 15vw, 66px); margin-top: 14px; }
  .lead { font-size: 16px; }
  .cta { display: grid; }
  .cta .btn { width: 100%; }
  .hall-facts li { padding-right: 6px; }
  .hall-facts li + li { padding-left: 8px; }
  .hall-facts b { font-size: 23px; }
  .hall-facts span { font-size: 11px; }
  /* celular: o mais acumulado ocupa a linha de cima inteira; bolões e horário embaixo */
  .hall-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 0; }
  .hall-facts li.hot { grid-column: 1 / -1; order: -1; padding: 0 0 14px; margin: 0; }
  .hall-facts:has(li.fire) { margin-top: 66px; }
  .hall-facts li.hot + li { border-left: 0; padding-left: 0; }
  .hall-facts li:not(.hot) { border-top: 1px solid var(--line); padding-top: 12px; }
  .hall-facts .hot b { font-size: 38px; }
  .vip { padding: 14px; margin: 4px auto 20px; }
  .palpite { width: calc(100% - 32px); }
  .palpite-in { padding: 18px 16px 16px; }
  .ball { width: 40px; height: 40px; font-size: 14.5px; }
  .saguao, .salao, .sala-res { padding: 64px 16px 60px; }
  .virada { padding: 80px 16px; }
  .countdown { grid-template-columns: repeat(4, 1fr); width: 100%; gap: 8px; }
  .sec-head { margin-bottom: 26px; }
  .sec-head > p:last-child { font-size: 15px; }
  .board { padding: 12px 10px; border-radius: 16px; }
  .board-cap { display: none; }
  /* cada linha do quadro vira 2 linhas: jogo + bolões / sorteio + prêmio */
  .brow { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 10px 8px; background: rgba(255,255,255,.025); }
  .brow + .brow { margin-top: 6px; }
  .brow .f-conc { display: none; }
  .brow .f-name { order: 1; } .brow .f-count { order: 2; margin-left: auto; } .brow .f-date { order: 3; } .brow .f-prize { order: 4; margin-left: auto; }
  .flap { font-size: clamp(10px, 3vw, 13px); width: clamp(12px, 3.75vw, 17px); max-width: none; flex: 0 0 auto; }
  .concierge { padding: 16px; border-radius: 20px; }
  .q { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .q-n { display: none; }
  .q h3 { font-size: 21px; margin-top: 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .chips::-webkit-scrollbar, .res-tabs::-webkit-scrollbar { display: none; }
  .res-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 16px; padding: 4px 16px 8px; width: auto; scrollbar-width: none; }
  .chip { flex: 0 0 auto; }
  .tk { grid-template-columns: minmax(0, 1fr); }
  .tk-stub { border-left: 0; border-top: 2px dashed rgba(10,24,56,.14); border-radius: 0 0 20px 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .tk-stub::before { left: -11px; top: -12px; } .tk-stub::after { left: auto; right: -11px; top: -12px; bottom: auto; }
  .tk-stub .btn { grid-column: 1 / -1; }
  .tk-stub .tk-price { grid-column: 1 / -1; }
  .tk-stub .tk-jar { grid-column: 1 / -1; justify-content: center; gap: 14px; }
  .tk-stub .tk-jar .jar { width: 104px; }
  .tk-prize b { font-size: 31px; }
  .res-card, .res-check { padding: 18px; border-radius: 20px; }
  .res-facts { grid-template-columns: minmax(0, 1fr); }
  .endereco { padding: 64px 16px 64px; }
  .end-cta { display: grid; }
  .postcard { transform: none; }
  .pc-in { grid-template-columns: minmax(0, 1fr); padding: 22px; min-height: 0; }
  .pc-left { padding: 0 0 18px; border-right: 0; border-bottom: 1.5px solid rgba(10,24,56,.12); }
  .pc-right { min-height: 210px; }
  .pc-postmark { right: 124px; top: 14px; }
  .postcard:has(iframe) { min-height: 380px; }
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: var(--dock-h); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
    padding: 0 6px env(safe-area-inset-bottom); background: rgba(255,253,248,.92); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--line), 0 -10px 30px rgba(10,24,56,.08); }
  .dock a { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 700 10.5px "Manrope", sans-serif; color: var(--navy-2); }
  .dock a.on { color: var(--emerald); }
  .dock a svg.lucide { width: 21px; height: 21px; }
  .dock .dock-wa { justify-self: center; width: 56px; height: 56px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(180deg, #2bd27a, var(--emerald)); box-shadow: 0 10px 24px rgba(13,122,69,.4), 0 0 0 4px var(--paper); }
  .dock .dock-wa .wa-ico { width: 26px; height: 26px; }
  .gate-center { gap: 14px; padding-top: calc(96vw * .2 + 6px); }
  .gate-plaque { padding: 18px 16px 14px; }
  .gate-actions { display: grid; }
  .leaf .bars { top: 15vh; } .leaf .spears { top: calc(15vh - 34px); } .leaf .r1 { top: 15vh; } .leaf .stile { top: calc(15vh - 6px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}