/* Loterias Grande Lago — 06/11/2026. Conceito "O Rio Vivo". Paleta do logo: azul do Rio Paraná, laranja do pôr do sol, ouro; cada lotérica tem a própria cor. */
:root {
  --rio: #071c3f; --rio2: #0b2c5e; --rio3: #114a8b; --agua: #1f86d4; --sol: #ff9a2e; --ouro: #f7c64b; --espuma: #f4f9ff; --mata: #1f5a3a;
  --casa: #ff9a2e; --casa2: #ffc05c; --txt: #e9f2fb; --suave: #a9c2dc; --linha: rgba(255, 255, 255, .14);
  --tit: "Barlow Condensed", "Arial Narrow", sans-serif; --corpo: "Figtree", "Segoe UI", system-ui, sans-serif;
  --doca: 0px;
}
html[data-casa="lago2"] { --casa: #39a9ff; --casa2: #8fd2ff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--rio); color: var(--txt); font: 400 16px/1.55 var(--corpo); overflow-x: hidden; }
body.menu-aberto { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--tit); line-height: 1.02; margin: 0; letter-spacing: .2px; }
em { font-style: italic; color: var(--casa2); transition: color .5s; }
.sec { position: relative; padding: 84px 22px; }
.sec-in { max-width: 1240px; margin: 0 auto; padding-right: 0; min-width: 0; }
.sobre { margin: 0 0 8px; font: 700 15px/1.2 var(--tit); letter-spacing: 2.4px; text-transform: uppercase; color: var(--casa2); transition: color .5s; }
.sec-cab { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.sec-cab h2 { font-size: clamp(36px, 5.4vw, 62px); font-weight: 800; font-style: italic; color: #fff; }
.sec-cab > p:not(.sobre) { color: var(--suave); margin: 12px 0 0; }
.sec-cab.lado { max-width: none; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: end; text-align: left; }
.sec-cab.lado p:last-child:not(.sobre) { margin: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border: 0; border-radius: 999px; font: 700 15px/1.1 var(--corpo); text-decoration: none; transition: transform .18s, box-shadow .18s, background .3s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.sol { background: linear-gradient(180deg, var(--casa2), var(--casa)); color: #06203f; box-shadow: 0 8px 22px -8px var(--casa); }
.btn.zap { background: #1fb868; color: #fff; box-shadow: 0 8px 22px -10px #1fb868; }
.btn.vidro { background: rgba(255, 255, 255, .13); color: #fff; backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.btn.fio { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42); }
.ic { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }

/* ENTRADA */
#gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: radial-gradient(90% 70% at 50% 45%, rgba(7, 28, 63, .55), rgba(5, 18, 42, .93)); backdrop-filter: blur(9px); transition: opacity .8s, backdrop-filter .8s, transform .9s; }
#gate.vai { opacity: 0; backdrop-filter: blur(0); transform: scale(1.08); pointer-events: none; }
.gate-caixa { width: min(460px, 100%); text-align: center; }
.gate-logo { width: min(290px, 68vw); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55)); animation: boiar 5.4s ease-in-out infinite; }
#gate h1 { font-size: 40px; font-style: italic; font-weight: 800; color: #fff; }
#gate p { color: var(--txt); margin: 8px 0 18px; }
.gate-bts { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.gate-bts .btn { width: min(320px, 100%); }
#gate .gate-aviso { color: var(--ouro); margin-top: 14px; }
@keyframes boiar { 0%, 100% { transform: translateY(0) rotate(-1.3deg); } 50% { transform: translateY(-11px) rotate(1.3deg); } }

/* TOPO */
.topo { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 18px; transition: background .3s, box-shadow .3s, height .3s; }
.topo.rolou { background: rgba(6, 24, 54, .88); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255, 255, 255, .1); }
.topo-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
.topo-logo img { width: 52px; height: 52px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.topo-logo span { font: 700 13px/1 var(--tit); letter-spacing: 1.4px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.topo-logo b { display: block; margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: .4px; font-style: italic; }
.casas { display: flex; flex: none; padding: 3px; gap: 3px; border-radius: 999px; background: rgba(6, 24, 54, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.casa-b { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 14px 4px 6px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 700 17px/1 var(--tit); letter-spacing: .3px; transition: background .3s, color .3s; }
.casa-b i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .16); font-style: normal; font-weight: 800; }
.casa-b.on { background: var(--casa); color: #06203f; }
.casa-b.on i { background: #fff; }
.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a { padding: 8px 10px; border-radius: 8px; font: 700 17px/1 var(--tit); letter-spacing: .4px; text-decoration: none; color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, .6); }
.menu a:hover { background: rgba(255, 255, 255, .13); }
.topo-zap { min-height: 42px; padding: 9px 15px; font-size: 14px; }
.trilho { position: fixed; z-index: 41; top: 0; left: 0; right: 0; height: 3px; }
.trilho i { display: block; height: 100%; background: linear-gradient(90deg, var(--casa), var(--ouro)); transform: scaleX(0); transform-origin: left; }

/* A VIAGEM (rio lateral) */
.viagem { position: fixed; z-index: 30; right: 12px; top: 50%; width: 38px; height: 420px; transform: translateY(-50%); }
.v-agua, .v-feito { fill: none; stroke-linecap: round; }
.v-agua { stroke: rgba(255, 255, 255, .22); stroke-width: 5; }
.v-feito { stroke: var(--casa); stroke-width: 5; transition: stroke .5s; }
.v-p { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; display: grid; place-items: center; }
.v-p::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(6, 24, 54, .55); transition: transform .2s, background .2s; }
.v-p.on::before { background: var(--ouro); transform: scale(1.5); }
.v-p span { position: absolute; right: 26px; padding: 3px 9px; border-radius: 7px; background: rgba(6, 24, 54, .92); font: 700 15px/1.3 var(--tit); white-space: nowrap; opacity: 0; transform: translateX(6px); transition: .18s; pointer-events: none; text-decoration: none; }
.v-p:hover span, .v-p:focus-visible span { opacity: 1; transform: none; }

/* O RIO */
.heroi { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: #0b2c5e url("assets/ceu-tarde.webp?v=11091739") center top / cover no-repeat; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#rio-gl, #rio-vida { position: absolute; inset: 0; width: 100%; height: 100%; }
#rio-vida { pointer-events: none; }
.heroi-sombra { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5, 18, 42, .52), rgba(5, 18, 42, 0) 54%), linear-gradient(180deg, rgba(5, 18, 42, .42), rgba(5, 18, 42, 0) 24%); }
.heroi-txt { position: absolute; left: clamp(20px, 5vw, 72px); top: clamp(88px, 15vh, 140px); width: min(560px, calc(100% - 40px)); pointer-events: none; }
.heroi-txt > * { pointer-events: auto; }
.heroi-txt .sobre { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.heroi h1 { font-size: clamp(54px, 8.2vw, 104px); font-weight: 800; font-style: italic; color: #fff; text-shadow: 0 3px 22px rgba(0, 0, 0, .5); }
.heroi h1 em { color: var(--ouro); }
.sub { margin: 14px 0 0; font-size: 17px; max-width: 470px; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.heroi-bts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.heroi-logo { position: absolute; right: clamp(64px, 8vw, 130px); top: 86px; width: clamp(200px, 21vw, 300px); height: auto; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); rotate: x var(--rx, 0deg); transform-origin: 50% 50%; animation: boiar 6.2s ease-in-out infinite; pointer-events: none; transition: rotate .4s; }
.heroi { perspective: 1100px; }
.heroi-tempo { position: absolute; left: clamp(20px, 5vw, 72px); bottom: 66px; display: flex; align-items: center; gap: 9px; padding: 6px 13px 6px 7px; border-radius: 999px; background: rgba(6, 24, 54, .6); backdrop-filter: blur(6px); font-size: 13px; color: #fff; max-width: calc(100% - 40px); }
.heroi-tempo b { padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 700 16px/1.1 var(--tit); }
.heroi-sol { position: absolute; right: clamp(64px, 8vw, 130px); bottom: 66px; width: min(300px, calc(100% - 40px)); padding: 7px 13px 9px; border-radius: 16px; background: rgba(6, 24, 54, .6); backdrop-filter: blur(6px); }
.heroi-sol label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #fff; min-height: 22px; }
#hora-agora { border: 0; padding: 2px 8px; border-radius: 999px; background: var(--casa); color: #06203f; font-size: 12px; font-weight: 700; }
#hora-rio { display: block; width: 100%; height: 26px; margin: 2px 0 0; background: transparent; -webkit-appearance: none; appearance: none; }
#hora-rio::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #0b1f4d, #e87a5d 25%, #6fc2f5 40%, #6fc2f5 62%, #ff8a2e 76%, #0b1f4d 90%); }
#hora-rio::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #0b1f4d, #e87a5d 25%, #6fc2f5 40%, #6fc2f5 62%, #ff8a2e 76%, #0b1f4d 90%); }
#hora-rio::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; border: 2px solid #fff; background: radial-gradient(circle, #fff3b5, #ffb02e); box-shadow: 0 0 12px #ffc35c; }
#hora-rio::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: #ffb02e; }
.heroi-dica { position: absolute; left: 50%; bottom: 128px; margin: 0; padding: 7px 15px; transform: translateX(-50%); border-radius: 999px; background: rgba(6, 24, 54, .5); font-size: 14px; white-space: nowrap; pointer-events: none; transition: opacity .6s; animation: chama 2.6s ease-in-out infinite; }
.heroi-dica.some { opacity: 0; }
@keyframes chama { 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .12); } }
.correnteza { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; overflow: hidden; background: linear-gradient(180deg, rgba(5, 18, 42, 0), rgba(5, 18, 42, .72)); }
.corr-trilho { display: flex; width: max-content; height: 100%; align-items: center; gap: 12px; padding-left: 12px; animation: correr var(--dur, 60s) linear infinite; }
.corr-trilho:hover { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
.corr-i { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #06203f; font: 800 18px/1 var(--tit); white-space: nowrap; animation: marola 3.6s ease-in-out infinite; animation-delay: var(--d); }
.corr-i i { width: 13px; height: 13px; border-radius: 50%; background: var(--c); }
.corr-i b { font-weight: 700; color: #3c5372; }
@keyframes marola { 50% { transform: translateY(-4px) rotate(-.6deg); } }

/* marola entre as seções */
.marola { position: absolute; left: 0; right: 0; top: -13px; height: 26px; overflow: hidden; pointer-events: none; }
.marola::before, .marola::after { content: ""; position: absolute; inset: 0 -120px; background: radial-gradient(34px 15px at 40px 26px, rgba(255, 255, 255, .22) 96%, transparent 100%) 0 0 / 80px 26px repeat-x; animation: marolar 6s linear infinite; }
.marola::after { top: 7px; opacity: .55; animation-duration: 9s; animation-direction: reverse; }
@keyframes marolar { to { transform: translateX(80px); } }

.pingo-tela { position: fixed; z-index: 58; width: 16px; height: 16px; margin: -8px; border-radius: 50%; border: 2px solid var(--casa2); pointer-events: none; animation: pingo .75s ease-out forwards; }

/* PORTOS */
.portos { background: linear-gradient(180deg, #0a2a58, #0b2f60); padding-top: 96px; }
.onda-topo { position: absolute; top: -1px; left: 0; right: 0; height: 26px; background: repeating-radial-gradient(circle at 40px -6px, transparent 0 33px, #0a2a58 34px 62px); background-size: 80px 26px; }
.portos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1120px; margin: 0 auto; }
.porto::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -6px; height: 34px; background: radial-gradient(26px 16px at 30px 22px, var(--p) 96%, transparent 100%) 0 0 / 66px 34px repeat-x; opacity: .2; animation: fluxo2 5s linear infinite; pointer-events: none; }
@keyframes fluxo2 { to { background-position-x: 66px; } }
.porto { position: relative; border-radius: 22px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--linha); transition: transform .3s, box-shadow .3s, background .3s; overflow: hidden; }
.porto.c-lago1 { --p: #ff9a2e; } .porto.c-lago2 { --p: #39a9ff; }
.porto.on { background: rgba(255, 255, 255, .11); box-shadow: inset 0 0 0 2px var(--p), 0 18px 40px -22px var(--p); }
.porto-toca { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 20px 20px 12px; border: 0; background: none; text-align: left; }
.porto-n { position: relative; display: block; width: 74px; animation: boiar 4.6s ease-in-out infinite; }
.porto-n b { position: absolute; left: 50%; top: 67%; transform: translate(-50%, -50%); font: 800 26px/1 var(--tit); color: #0b2a55; }
.porto-tx { min-width: 0; }
.porto-tx small { font: 700 15px/1 var(--tit); letter-spacing: 1.6px; text-transform: uppercase; color: var(--p); }
.porto-tx h3 { font-size: clamp(25px, 2.8vw, 31px); font-weight: 800; color: #fff; margin: 2px 0 3px; }
.porto-tx p { margin: 0; font-size: 14px; color: var(--suave); }
.porto-tx .porto-est { color: #ffc2a8; } .porto-tx .porto-est.sim { color: #8df0b5; }
.porto-num { text-align: center; }
.porto-num b { display: block; font: 800 46px/1 var(--tit); color: #fff; }
.porto-num span { font-size: 12px; color: var(--suave); }
.porto-fim { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 20px 18px; }
.porto-sel { padding: 7px 13px; border-radius: 999px; background: var(--p); color: #06203f; font: 800 15px/1.1 var(--tit); letter-spacing: .3px; }
.porto:not(.on) .porto-sel { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px var(--p); }
.mini { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.mini.zap { background: #1fb868; }

/* VIRADA */
.virada { position: relative; background: #040b1e; }
.virada-cena { position: relative; height: min(88vh, 720px); min-height: 560px; overflow: hidden; touch-action: pan-y; background: #040b1e url("assets/ceu-noite.webp?v=11091739") center top / cover no-repeat; }
#virada-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.virada-topo { position: absolute; left: 0; right: 0; top: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 18px; text-align: center; pointer-events: none; }
.virada-topo img { width: min(430px, 76vw); height: auto; filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .7)); }
.virada-premio { margin: 0; font: 800 clamp(26px, 3.6vw, 38px)/1.1 var(--tit); font-style: italic; color: var(--ouro); text-shadow: 0 2px 14px #000; }
.virada-conta { display: flex; gap: 8px; }
.virada-conta span { width: 66px; padding: 6px 0 5px; border-radius: 12px; background: rgba(6, 18, 44, .72); box-shadow: inset 0 0 0 1px rgba(247, 198, 75, .4); backdrop-filter: blur(4px); }
.virada-conta b { display: block; font: 800 30px/1 var(--tit); color: #fff; font-variant-numeric: tabular-nums; }
.virada-conta small { font-size: 11px; color: var(--suave); }
.virada-dica { margin: 4px 0 0; font-size: 13px; color: #fff; text-shadow: 0 1px 6px #000; }
.virada .sec-in { padding: 40px 22px 70px; }

/* BOLÕES */
.boloes { background: linear-gradient(180deg, #0b2f60, #0a3a70 60%, #0a4078); }
.sync { display: block; margin-top: 4px; font-weight: 600; color: #8df0b5; }
.sync.off { color: var(--ouro); }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px var(--linha); font: 700 17px/1 var(--tit); letter-spacing: .3px; color: #fff; }
.chip small { font: 600 12px/1 var(--corpo); opacity: .8; }
.chip[aria-selected="true"] { background: var(--c, var(--casa)); box-shadow: none; color: #fff; }
.chip:not([style])[aria-selected="true"] { background: var(--casa); color: #06203f; }
.ordem { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--suave); }
.ordem select { min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; }
.ordem option { color: #06203f; }
.grade-boloes { --sl: 0deg; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.bolao { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; background: #fbfdff; color: #0a2340; box-shadow: 0 14px 30px -18px #000; animation: flutua 6s ease-in-out infinite; animation-delay: var(--fl); transition: box-shadow .25s; isolation: isolate; }
.bolao:hover { box-shadow: 0 22px 40px -18px var(--c); }
@keyframes flutua { 50% { transform: translateY(-5px); } }
.b-faixa { position: relative; background: #fff; }
.b-faixa img { width: 100%; height: auto; aspect-ratio: 720 / 250; object-fit: cover; }
.b-vip { position: absolute; right: 8px; top: 8px; padding: 3px 11px; border-radius: 999px; background: linear-gradient(180deg, #ffe08a, #e7a823); color: #4a2d00; font: 800 16px/1.1 var(--tit); letter-spacing: 1px; }
.bolao.vip { box-shadow: 0 0 0 2.5px var(--ouro), 0 14px 30px -14px var(--ouro); }
.b-agua { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--nv); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, #fff), color-mix(in srgb, var(--c) 40%, #fff)); transform: skewY(var(--sl)); transition: height 1s; }
.b-agua i { position: absolute; left: -50%; top: -13px; width: 200%; height: 14px; background: radial-gradient(14px 10px at 22px 16px, color-mix(in srgb, var(--c) 26%, #fff) 96%, transparent 100%) 0 0 / 44px 14px repeat-x; animation: ondinha 3.6s linear infinite; }
.b-agua i + i { opacity: .55; top: -9px; animation-duration: 5.4s; animation-direction: reverse; }
@keyframes ondinha { to { transform: translateX(44px); } }
.b-dia { margin: 11px 14px 0; font-size: 13px; color: #40597a; }
.b-dia b { color: #0a2340; }
.b-premio { margin: 5px 14px 0; }
.b-premio small { display: block; font-size: 12px; color: #55708f; }
.b-premio b { font: 800 34px/1.05 var(--tit); color: color-mix(in srgb, var(--c) 78%, #06203f); }
.b-comp { margin: 3px 14px 0; font-size: 13.5px; color: #2d4563; }
.b-nivel { display: flex; justify-content: space-between; gap: 8px; margin: 10px 14px 0; padding-top: 8px; border-top: 1px dashed rgba(10, 35, 64, .22); font-size: 13px; font-weight: 600; color: #0a2340; }
.b-preco { margin: 5px 14px 0; font-size: 14px; color: #2d4563; }
.b-preco b { font: 800 30px/1 var(--tit); color: #0a2340; }
.b-bts { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 7px; margin: 11px 14px 13px; }
.b-bts .btn { min-height: 44px; padding: 9px 8px; font-size: 14px; }
.b-bts .btn.sol { background: var(--c); color: #fff; box-shadow: none; }
.b-jogos { margin: -3px 14px 13px; font-size: 13px; }
.b-jogos summary { min-height: 30px; cursor: pointer; font-weight: 600; color: #124a86; }
.b-dez { display: flex; flex-wrap: wrap; gap: 3px; margin: 5px 0 0; }
.b-dez i { padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(10, 35, 64, .15); font: 700 15px/1.25 var(--tit); }
.b-dez i.tr { background: #eefbe9; }
.pingo { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 2px solid var(--c); pointer-events: none; animation: pingo .85s ease-out forwards; }
@keyframes pingo { to { transform: scale(10); opacity: 0; } }
.ver-mais { display: flex; margin: 24px auto 0; }
.vazio { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 34px 18px; text-align: center; border-radius: 18px; background: rgba(255, 255, 255, .06); }
.vazio p { flex-basis: 100%; margin: 0; }

/* PESCARIA */
.pescaria { background: linear-gradient(180deg, #0a4078, #083861); }
#pesca-jogos { justify-content: center; margin-bottom: 16px; }
.pesca-palco { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 22px 44px -24px #000; background: #0d4a55; }
#pesca { width: 100%; height: clamp(400px, 58vh, 560px); cursor: crosshair; touch-action: pan-y; }
.pesca-msg { position: absolute; left: 50%; bottom: 10px; white-space: nowrap; max-width: calc(100% - 20px); margin: 0; padding: 5px 13px; transform: translateX(-50%); border-radius: 999px; background: rgba(6, 24, 54, .74); font-size: 14px; color: #fff; text-align: center; pointer-events: none; }
.pesca-msg.in { animation: msg .4s; }
@keyframes msg { from { transform: translate(-50%, 7px); opacity: 0; } }
.pesca-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; }
.sambura { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.dz { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #06203f; box-shadow: inset 0 0 0 3px var(--c); font: 800 19px/1 var(--tit); animation: pula .4s; }
.dz.vago { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); animation: none; }
@keyframes pula { from { transform: translateY(-16px) scale(.6); } }
.pesca-bts { display: flex; gap: 8px; }
.pesca-fim { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px var(--casa); }
.pesca-fim[hidden] { display: none; }
.pesca-fim b { font: 800 23px/1.15 var(--tit); color: #fff; word-break: break-word; }
.pesca-fim p { margin: 3px 0 0; font-size: 13px; color: var(--suave); }
.pesca-fim > div:first-child { flex: 1 1 280px; min-width: 0; }
.pf-bts { display: flex; flex-wrap: wrap; gap: 8px; }

/* SETE QUEDAS */
.quedas { position: relative; background: linear-gradient(180deg, #2a1c12, #12283f 340px, #0a3a64); }
.queda-cena { position: relative; height: min(84vh, 680px); min-height: 500px; overflow: hidden; background: #33241a url("assets/sete-quedas.webp?v=11091739") center / cover; }
#queda-gl, #queda-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
#queda-fx { pointer-events: none; }
.queda-tit { position: absolute; left: 0; right: 0; top: 0; padding: 74px 22px 60px; text-align: center; background: linear-gradient(180deg, rgba(4, 16, 30, .94) 30%, rgba(4, 16, 30, .62) 70%, rgba(4, 16, 30, 0)); pointer-events: none; }
.queda-tit h2 { font-size: clamp(36px, 5.4vw, 62px); font-weight: 800; font-style: italic; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); }
.queda-tit p:last-child { max-width: 620px; margin: 8px auto 0; color: #fff; text-shadow: 0 1px 8px #000; }
.queda-tit .sobre { color: #fff; }
.queda-baixo { position: relative; padding: 0 22px 76px; margin-top: -52px; }
.res-chips { justify-content: center; margin-bottom: 14px; }
.res-chips .chip { background: rgba(9, 28, 56, .9); }
.res-card { --c: #2fa; position: relative; padding: 18px 20px; border-radius: 20px; background: #fbfdff; color: #0a2340; box-shadow: 0 20px 40px -24px #000; border-top: 6px solid var(--c); }
.res-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.res-cab h3 { font-size: 34px; font-weight: 800; font-style: italic; color: color-mix(in srgb, var(--c) 80%, #06203f); }
.res-cab p { margin: 2px 0 0; font-size: 14px; color: #40597a; }
.selo-res { flex: none; padding: 5px 12px; border-radius: 999px; background: #e7f6ec; color: #0c6a39; font: 800 16px/1.1 var(--tit); }
.selo-res.acum { background: #fff1dc; color: #a65200; }
.res-corpo { margin: 13px 0; min-width: 0; }
.fileira + .fileira { margin-top: 10px; }
.rotulo { display: block; margin-bottom: 4px; font-size: 13px; color: #40597a; }
.bolas { display: flex; flex-wrap: wrap; gap: 6px; }
.bola { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 8%, color-mix(in srgb, var(--c) 72%, #fff) 30%, var(--c) 78%); color: #fff; font: 800 21px/1 var(--tit); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); box-shadow: 0 3px 6px rgba(0, 0, 0, .25); }
.bolas.trevos .bola { width: 54px; border-radius: 24px; background: #2e9b57; }
.bola.acerto { outline: 3px solid var(--ouro); outline-offset: 2px; }
.lista-res { display: grid; gap: 3px; }
.lr-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-radius: 8px; background: #eef3f9; font-size: 14px; }
.lr-linha b { font-family: var(--tit); font-size: 19px; }
.lr-linha.jogo { grid-template-columns: 24px minmax(0, 1fr) auto minmax(0, 1fr); }
.lr-fora { text-align: right; }
.res-extra { margin: 9px 0 0; font-size: 14px; }
.res-prox { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px dashed rgba(10, 35, 64, .2); }
.res-prox small { display: block; font-size: 13px; color: #40597a; }
.res-prox b { font: 800 30px/1 var(--tit); color: #0a2340; }
.res-prox .btn.fio { color: #0a2340; box-shadow: inset 0 0 0 1.5px #0a2340; }
.conf { margin-top: 16px; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--linha); }
.conf-so { margin: 0; }
.conf-topo { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.conf-topo > div:first-child { flex: 1 1 260px; min-width: 0; }
.conf-topo h3 { font-size: 28px; font-weight: 800; color: #fff; }
.conf-topo p { margin: 2px 0 0; font-size: 14px; color: var(--suave); }
.conf-placar { padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 15px; }
.conf-placar b { font: 800 30px/1 var(--tit); color: var(--ouro); }
.conf-placar small { display: block; color: var(--suave); }
.volante { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 5px; }
.num { min-height: 42px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .1); font: 700 18px/1 var(--tit); color: #fff; }
.num.on { background: var(--casa); color: #06203f; }
.num.acerto { background: #1fb868; color: #fff; box-shadow: 0 0 0 2px var(--ouro); }
.conf-acoes { margin-top: 12px; }

/* PRÊMIOS */
.premios { padding-bottom: 76px; background: linear-gradient(180deg, #0a3a64, #0a4a7e); overflow: hidden; }
.premios .sec-cab h2 em { font-variant-numeric: tabular-nums; }
.rio-garrafas { position: relative; height: 210px; margin: 0 -22px 20px; overflow: hidden; background: linear-gradient(180deg, transparent 46%, rgba(120, 200, 245, .22) 47%, rgba(14, 70, 120, .55)); }
.rio-garrafas::before { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 8px; background: radial-gradient(18px 6px at 20px 0, rgba(255, 255, 255, .42) 96%, transparent 100%) 0 0 / 56px 8px repeat-x; animation: fluxo 7s linear infinite; }
@keyframes fluxo { to { background-position-x: -56px; } }
.garrafa { position: absolute; bottom: calc(18px + var(--y)); left: 0; width: 66px; padding: 0; border: 0; background: none; animation: deriva var(--v) linear infinite; animation-delay: calc(var(--x) * var(--v) * -1); }
.garrafa:hover, .garrafa:focus-visible { animation-play-state: paused; }
.garrafa svg { width: 66px; height: 160px; transform-origin: 50% 80%; animation: balanca 3.6s ease-in-out infinite; animation-delay: var(--a); filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .3)); }
.garrafa.ab svg { filter: drop-shadow(0 0 14px var(--ouro)); }
.g-tag { position: absolute; left: 50%; top: 40px; padding: 3px 9px; transform: translateX(-50%); border-radius: 999px; background: #fff; color: #06203f; font: 800 16px/1.1 var(--tit); white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
@keyframes deriva { from { transform: translateX(calc(100vw + 90px)); } to { transform: translateX(-110px); } }
@keyframes balanca { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(13deg); } }
.bilhete-rio { max-width: 520px; margin: 0 auto 22px; }
.bilhete-vazio { margin: 0; text-align: center; font-size: 15px; color: var(--suave); }
.bilhete-c { padding: 15px 20px 14px; border-radius: 6px; background: #f3e4bd radial-gradient(120% 90% at 50% 0, #fbf1d7, #ecd8a8); color: #3f2c12; text-align: center; box-shadow: 0 16px 30px -18px #000; }
.bilhete-rio.in .bilhete-c { animation: desenrola .55s cubic-bezier(.2, .9, .3, 1.2); transform-origin: top; }
@keyframes desenrola { from { transform: scaleY(.08); opacity: 0; } }
.bilhete-c small { display: block; font-size: 13px; }
.bilhete-c b { display: block; font: 800 42px/1.1 var(--tit); color: #1f6d3d; }
.bilhete-c p { margin: 0; font-size: 14px; }
.lista-premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.lista-premios li { padding: 9px 13px; border-radius: 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 3px 0 0 var(--c); min-width: 0; }
.lista-premios b { display: block; font: 800 25px/1.1 var(--tit); color: #fff; }
.lista-premios span { display: block; font-size: 14px; }
.lista-premios small { color: var(--suave); }

/* CARTA */
.carta { background: linear-gradient(180deg, #0a4a7e, #082f59); }
.carta-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.carta-mapa { position: sticky; top: 84px; border-radius: 18px; overflow: hidden; background: #f2e3c4; color: #5a3f1a; box-shadow: 0 20px 40px -24px #000; }
.carta-mapa svg { width: 100%; height: auto; }
.carta-nota { margin: 0; padding: 7px 12px 9px; font-size: 12.5px; }
.c-rio { fill: #8ec6e0; stroke: #4b8fb3; stroke-width: 2; }
.c-ilha { fill: #b7cf8f; stroke: #7a9a55; }
.c-corr { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 2; stroke-dasharray: 10 14; animation: corre 3s linear infinite; }
@keyframes corre { to { stroke-dashoffset: -48; } }
.c-ponte { stroke: #5a3f1a; stroke-width: 6; stroke-dasharray: 16 3; }
.c-tx { font: 700 18px var(--tit); fill: #5a3f1a; } .c-tx.g { font-size: 21px; letter-spacing: 1.5px; }
.c-rio-tx { font: italic 800 34px var(--tit); fill: #215a80; letter-spacing: 3px; }
.c-rota { fill: none; stroke: #b5462c; stroke-width: 2.5; stroke-dasharray: 3 8; stroke-linecap: round; }
.c-pin { cursor: pointer; }
.c-pin circle { stroke: #fff; stroke-width: 4; transition: r .25s; }
.c-pin.p1 circle { fill: #ff9a2e; } .c-pin.p2 circle { fill: #2a8fe0; }
.c-pin.on circle { r: 30; }
.c-pin text { font: 800 26px var(--tit); fill: #06203f; pointer-events: none; }
.carta-casas { display: grid; gap: 14px; min-width: 0; }
.casa-c { padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--linha); }
.casa-c.c-lago1 { --p: #ff9a2e; } .casa-c.c-lago2 { --p: #39a9ff; }
.casa-c.on { box-shadow: inset 0 0 0 2px var(--p); }
.cc-cab { display: flex; gap: 12px; align-items: center; }
.cc-cab > div { min-width: 0; }
.cc-n { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--p); color: #06203f; font: 800 28px/1 var(--tit); }
.cc-cab h3 { font-size: 26px; font-weight: 800; color: #fff; }
.cc-cab p { margin: 2px 0 0; font-size: 14px; color: var(--suave); }
.neon { margin: 11px 0 8px; padding: 6px 12px; border-radius: 10px; background: #1a1016; color: #ff7a7a; font: 700 18px/1.2 var(--tit); letter-spacing: .4px; text-shadow: 0 0 9px #ff4646; }
.neon.sim { color: #8dffb9; text-shadow: 0 0 9px #27e07a; }
.horas { margin: 0 0 11px; padding: 0; list-style: none; font-size: 14px; }
.horas li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 7px; border-radius: 6px; }
.horas li.hoje { background: rgba(255, 255, 255, .1); font-weight: 600; }
.cc-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-bts .btn { min-height: 44px; padding: 9px 14px; font-size: 14px; }
.redes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.redes a { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 15px; border-radius: 999px; background: rgba(255, 255, 255, .1); text-decoration: none; font-weight: 600; }

/* RODAPÉ */
.rodape { background: #051731; padding: 34px 22px; font-size: 13.5px; color: var(--suave); }
.rod-grade { display: grid; grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.rod-grade p { margin: 0 0 9px; }
.rod-grade b { color: #fff; }
.m18 b { display: inline-grid; place-items: center; width: 31px; height: 31px; margin-right: 4px; border-radius: 50%; border: 2px solid #e6564a; color: #fff; font: 800 15px/1 var(--tit); }
.cred img { width: 180px; height: auto; }

/* CELULAR: doca */
.doca { display: none; }
.menu-tela { position: fixed; inset: 0; z-index: 44; display: grid; align-content: center; gap: 4px; padding: 20px 26px 90px; background: rgba(5, 20, 46, .97); }
.menu-tela[hidden] { display: none; }
.menu-tela a { padding: 11px 6px; border-bottom: 1px solid var(--linha); font: 800 italic 30px/1.1 var(--tit); text-decoration: none; color: #fff; }

/* troca de lotérica: a onda atravessa a tela */
.onda-troca { position: fixed; z-index: 50; top: -5%; bottom: -5%; left: 0; width: 140%; transform: translateX(-110%); background: linear-gradient(90deg, transparent, var(--casa) 18%, var(--casa) 72%, transparent); opacity: .92; pointer-events: none; }
.onda-troca.vai { animation: onda .86s cubic-bezier(.6, .05, .3, 1); }
@keyframes onda { to { transform: translateX(110%); } }
.toast { position: fixed; z-index: 55; left: 50%; bottom: calc(22px + var(--doca)); max-width: calc(100% - 24px); padding: 9px 16px; transform: translateX(-50%); border-radius: 12px; background: #fff; color: #06203f; font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0 14px 30px -12px #000; }
.toast[hidden] { display: none; }

html.sem-gl .heroi { background-size: cover; }

@media (max-width: 1180px) {
  .menu { display: none; }
  .topo-zap, .topo .ic { margin-left: 0; }
  .topo .casas { margin-left: auto; }
}
@media (max-width: 900px) {
  .sec-cab.lado { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .carta-grade { grid-template-columns: minmax(0, 1fr); }
  .carta-mapa { position: relative; top: 0; }
  .rod-grade { grid-template-columns: minmax(0, 1fr); }
  .viagem { display: none; }
}
@media (max-width: 760px) {
  :root { --doca: 66px; }
  html { scroll-padding-top: 66px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .sec { padding: 60px 16px; }
  .topo { height: 60px; padding: 0 12px; }
  .topo .casas, .topo-zap { display: none; }
  .topo .ic { margin-left: auto; }
  .topo-logo img { width: 46px; height: 46px; }
  .doca { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: calc(66px + env(safe-area-inset-bottom)); padding: 0 10px env(safe-area-inset-bottom); background: rgba(5, 20, 46, .96); box-shadow: 0 -1px 0 rgba(255, 255, 255, .14); }
  .doca .casas { flex: 1 1 auto; min-width: 0; }
  .doca .casa-b { flex: 1 1 0; justify-content: center; min-height: 44px; padding: 4px 7px 4px 4px; min-width: 0; }
  .doca .ic.zap { background: #1fb868; }
  .heroi { min-height: 600px; height: calc(100svh - 66px); }
  .heroi-txt { top: 70px; left: 18px; width: calc(100% - 36px); }
  .heroi h1 { font-size: clamp(50px, 14.5vw, 72px); }
  .sub { font-size: 15px; margin-top: 8px; }
  .heroi-logo { display: none; }
  .heroi-bts { margin-top: 12px; }
  .heroi-bts .btn { min-height: 44px; padding: 9px 15px; font-size: 14px; }
  .heroi-tempo { left: 12px; bottom: 128px; font-size: 12px; max-width: calc(100% - 24px); }
  .heroi-sol { left: 12px; right: 12px; bottom: 56px; width: auto; padding: 5px 12px 6px; }
  .heroi-dica { display: none; }
  .correnteza { height: 46px; }
  .corr-i { font-size: 16px; }
  .portos-grade { grid-template-columns: minmax(0, 1fr); }
  .porto-toca { grid-template-columns: 58px minmax(0, 1fr) auto; padding: 16px 14px 10px; gap: 10px; }
  .porto-n { width: 58px; }
  .porto-n b { font-size: 22px; }
  .porto-num b { font-size: 36px; }
  .porto-fim { padding: 0 14px 15px; }
  .filtros { align-items: stretch; }
  .ordem { width: 100%; justify-content: space-between; }
  .ordem select { flex: 1; }
  .grade-boloes { grid-template-columns: minmax(0, 1fr); }
  .virada-conta span { width: 60px; }
  .res-card, .conf { padding: 15px 14px; }
  .res-cab h3 { font-size: 29px; }
  .bola { width: 40px; height: 40px; font-size: 19px; }
  .queda-tit { padding: 66px 16px 40px; }
  .queda-baixo { padding: 0 14px 56px; }
  .pesca-bts { width: 100%; }
  .pesca-bts .btn { flex: 1; }
  .rio-garrafas { margin: 0 -16px 18px; }
  .toast { bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  .garrafa { position: relative; animation: none; display: inline-block; }
  .rio-garrafas { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 10px; }
}
.lr-casa, .lr-fora { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) { .lr-linha.jogo { grid-template-columns: 18px minmax(0, 1fr) auto minmax(0, 1fr); gap: 5px; padding: 6px 5px; font-size: 12.5px; } }

/* Barra de loterias igual ao site 3K: Todas + uma por uma, com a contagem (06/11) */
.lojas { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; margin-bottom: 18px; }
.loja-b { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 7px 10px 7px 18px; border: 1px solid rgba(255, 228, 160, .34); border-radius: 999px; background: rgba(6, 24, 54, .55); color: #fff; font: 700 18px/1 var(--tit); letter-spacing: .3px; backdrop-filter: blur(6px); transition: border-color .2s, background .2s; }
.loja-b span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); font: 800 13px/1 var(--corpo); }
.loja-b:hover { border-color: #f6d77c; }
.loja-b[aria-pressed="true"] { border-color: #fff0bf; background: linear-gradient(180deg, #fff3c4, #f6d77c 45%, #c98d1a); color: #1f1503; box-shadow: inset 0 1px 0 #fffbe8, 0 6px 16px rgba(233, 184, 74, .3); }
.loja-b[aria-pressed="true"] span { background: rgba(31, 21, 3, .16); }
.b-loja { position: relative; display: flex; align-items: center; gap: 7px; margin: 11px 14px 0; font-size: 13px; line-height: 1.25; color: #40597a; }
.b-loja b { flex: none; color: #0a2340; }
.b-loja b::after { content: " ·"; font-weight: 400; color: #40597a; }
.b-loja i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #06203f; font: 800 13px/1 var(--corpo); }
.b-loja.l1 i { background: #ff9a2e; } .b-loja.l2 i { background: #39a9ff; }
@media (max-width: 620px) {
  .lojas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .loja-b { font-size: 17px; }
  .loja-b:first-child { grid-column: 1 / -1; }
}