/* topx-cassino1.com | family C: left rail, ribbon headings, light table cards */
:root{
  --bg:#090F1E;--sf:#111A2B;--sf2:#1b2a47;
  --ink:#ffffff;--mut:rgba(255,255,255,.78);--line:rgba(255,255,255,.14);
  --acc:#FF2400;--accd:#a81800;--accl:#ff8a73;
  --paper:#f2f4fa;--pink:#0b1426;--pmut:#44506a;--pline:#d4dbec;
  --rail:0px;--pad:16px;--gut:16px;
  --f:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fh:Archivo,"Nunito Sans",system-ui,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.66 var(--f);overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:var(--accl);text-underline-offset:3px}
a:hover{color:#fff}
p{margin:0 0 14px}
h1,h2,h3{font-family:var(--fh);margin:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:3px;font:800 16.5px/1.2 var(--f);text-decoration:none;text-align:center;letter-spacing:.01em;border:0;cursor:pointer}
.btn-main{background:var(--acc);color:#fff;box-shadow:5px 5px 0 #fff}
.btn-main:hover{background:#ff3d1c;color:#fff;box-shadow:2px 2px 0 #fff;transform:translate(3px,3px)}
.btn:focus-visible,.bl-faq summary:focus-visible,.top nav a:focus-visible{outline:3px solid #ffd2c9;outline-offset:3px}
.bl-big{min-height:56px;padding:0 32px;font-size:18px}

/* ---------- header: top bar on phones, left rail on desktop ---------- */
.top{background:var(--sf);border-bottom:3px solid var(--acc)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px 8px}
.top-in>a:first-child{order:1;display:block}
.top-in>a:first-child img{width:95px;height:40px}
.top .btn-main{order:2;margin-left:auto;min-height:44px;padding:0 16px;font-size:16px;box-shadow:3px 3px 0 #fff}
.top nav{order:3;width:100%;display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.top nav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:3px;color:#fff;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap}
.top nav a:hover{border-color:var(--acc);background:rgba(255,36,0,.16);color:#fff}
.bl-p-home .top nav a[href="/"],
.bl-p-bonus .top nav a[href="/bonus-500-lado-a-lado/"],
.bl-p-app .top nav a[href="/topx-app-ou-atalho/"],
.bl-p-saque .top nav a[href="/saque-o-que-comparar/"],
.bl-p-conf .top nav a[href="/topx-cassino-e-confiavel/"],
.bl-p-sobre .top nav a[href="/sobre-o-site/"]{background:#fff;color:var(--pink);border-color:#fff;font-weight:800}

/* ---------- hero ---------- */
.bl-hero{padding:28px var(--gut) 34px;background:radial-gradient(700px 360px at 95% -10%,rgba(255,36,0,.32),transparent 64%),linear-gradient(180deg,#0e1830,var(--bg));border-bottom:1px solid var(--line)}
.bl-hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center}
.bl-hero-text{padding-bottom:30px}
.bl-hero-text .bl-hero-txt{max-width:780px}
.bl-kick{display:inline-block;margin:0 0 14px;padding:3px 12px;background:#fff;color:var(--pink);font:800 16px/1.4 var(--fh);letter-spacing:.08em;text-transform:uppercase}
.bl-hero h1{margin:0 0 16px;font-size:clamp(1.8rem,3.1vw,2.7rem);line-height:1.14;font-weight:800;letter-spacing:-.01em}
.bl-lead{font-size:18px;color:var(--mut);margin:0 0 20px}
.bl-stamp{display:inline-block;margin:18px 0 0;padding:4px 12px;border:1px dashed rgba(255,255,255,.4);color:var(--mut);font-size:16px}
.bl-hero-fig img{width:100%;border-radius:2px;box-shadow:7px 7px 0 var(--acc)}
.bl-fig-crown img{box-shadow:none;max-width:340px;margin-inline:auto}
.bl-hero-sm .bl-hero-fig img{max-height:360px;object-fit:cover}
.bl-fig-crown img{max-height:none;object-fit:contain}

/* CTA block + ad note */
.bl-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.bl-ad{color:rgba(255,255,255,.62);font-size:14px;line-height:1.35}
.bl-cta-end{margin-top:22px}

/* ---------- sections and ribbon headings ---------- */
.bl-sec{padding:34px var(--gut) 6px}
.bl-sec h2,.bl-end h2{font-weight:800;font-size:clamp(1.28rem,2.1vw,1.7rem);line-height:1.22}
.bl-sec h2{position:relative;display:block;width:fit-content;max-width:calc(100% + var(--gut));margin:0 0 20px calc(var(--gut) * -1);padding:11px 46px 11px var(--gut);background:var(--acc);color:#fff;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.bl-h3{margin:26px 0 12px;font-size:1.15rem;font-weight:700;color:var(--accl)}

/* ---------- tables: light cards ---------- */
.bl-tw{margin:0 0 18px;background:var(--paper);color:var(--pink);border-radius:3px;box-shadow:0 0 0 1px var(--pline),6px 6px 0 rgba(255,36,0,.55);overflow:hidden}
.bl-t{width:100%;border-collapse:collapse;font-size:16.5px;line-height:1.5}
.bl-t caption{padding:12px 16px;text-align:left;font-weight:800}
.bl-t thead th{padding:12px 16px;background:var(--sf2);color:#fff;text-align:left;font:700 16px/1.3 var(--fh);letter-spacing:.05em;text-transform:uppercase;border-bottom:3px solid var(--acc)}
.bl-t td,.bl-t tbody th{padding:12px 16px;vertical-align:top;text-align:left;border-bottom:1px solid var(--pline)}
.bl-t tbody th{font-weight:800;width:24%}
.bl-t tbody tr:nth-child(even){background:#e5eaf6}
.bl-t tbody tr:last-child th,.bl-t tbody tr:last-child td{border-bottom:0}
.bl-t a{color:#b01800;font-weight:700}
.bl-t a:hover{color:var(--acc)}
.bl-tag{display:inline-block;margin:0 6px 4px 0;padding:2px 10px;border-radius:2px;font-size:16px;font-weight:800;line-height:1.4}
.bl-ok{background:#d6f2e2;color:#0a5934}
.bl-open{background:#ffe9b8;color:#6a4700}

/* ---------- misc content ---------- */
.bl-sec p,.bl-end p{max-width:780px}
.bl-fig{margin:18px 0}
.bl-fig-wide img{width:100%;max-height:420px;object-fit:cover;border-radius:3px}
.bl-fig-small{max-width:240px}
.bl-fig-small img{border-radius:3px}
.bl-msg{margin:6px 0 16px;padding:16px 18px;max-width:780px;background:var(--sf);border-left:5px solid var(--acc);color:#fff;font-size:17px}

/* ---------- strip and closing block ---------- */
.bl-band{margin:30px 0 0;padding:22px var(--gut);display:flex;flex-direction:column;gap:14px;background:linear-gradient(90deg,#7a1000,#b01800);border-block:1px solid rgba(255,255,255,.2)}
.bl-band p{margin:0;max-width:640px}
.bl-band .bl-ad{color:rgba(255,255,255,.8)}
.bl-end{margin-top:34px;padding:34px var(--gut) 40px;background:var(--paper);color:var(--pink)}
.bl-end h2{margin:0 0 10px}
.bl-end .bl-ad{color:var(--pmut)}
.bl-end .btn-main{box-shadow:5px 5px 0 var(--pink)}

/* ---------- faq ---------- */
.bl-faq details{margin:0 0 8px;background:var(--sf);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:2px}
.bl-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 16px;cursor:pointer;list-style:none}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary h3{margin:0;font-size:17.5px;line-height:1.35;font-weight:700}
.bl-faq summary i{flex:0 0 auto;font:800 24px/1 var(--fh);color:var(--accl)}
.bl-faq details[open] summary i{transform:rotate(45deg)}
.bl-faq details p{margin:0;padding:0 16px 14px;color:var(--mut)}

/* ---------- footer ---------- */
.foot{margin-top:0;padding:28px var(--gut) 34px;background:var(--sf);border-top:3px solid var(--acc);color:var(--mut)}
.foot-top{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
.foot-top img{width:95px;height:40px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-size:16px}
.foot p{margin:0 0 10px;font-size:16px;max-width:880px}

/* ---------- mobile table stacking ---------- */
@media (max-width:760px){
  .bl-t,.bl-t tbody,.bl-t tr,.bl-t th,.bl-t td{display:block;width:100%}
  .bl-t thead{display:none}
  .bl-tw{background:transparent;box-shadow:none;overflow:visible}
  .bl-t tbody tr{margin:0 0 12px;background:var(--paper)!important;border-radius:3px;box-shadow:0 0 0 1px var(--pline),4px 4px 0 rgba(255,36,0,.55);overflow:hidden}
  .bl-t tbody th{width:100%;padding:10px 14px;background:var(--sf2);color:#fff;border-bottom:3px solid var(--acc)}
  .bl-t td{padding:9px 14px;border-bottom:1px solid var(--pline);color:var(--pink)}
  .bl-t td::before{content:attr(data-label);display:block;color:#b01800;font:800 14px/1.3 var(--fh);letter-spacing:.06em;text-transform:uppercase}
  .bl-t tbody tr:last-child td{border-bottom:1px solid var(--pline)}
  .bl-t tbody tr td:last-child{border-bottom:0}
  .bl-sec h2{font-size:1.25rem}
  .bl-hero-fig img{box-shadow:5px 5px 0 var(--acc);margin-right:5px}
}

/* ---------- desktop: left rail ---------- */
@media (min-width:1024px){
  :root{--rail:248px;--pad:44px;--gut:max(44px,calc((100vw - 248px - 1040px) / 2))}
  .top{position:fixed;top:0;bottom:0;left:0;width:var(--rail);z-index:30;overflow-y:auto;border-bottom:0;border-right:1px solid var(--line)}
  .top::after{content:"";position:absolute;top:0;right:0;width:5px;height:100%;background:linear-gradient(180deg,var(--acc),#5a0c00 72%,transparent);pointer-events:none}
  .top-in{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:26px;min-height:100%;padding:26px 22px 26px 18px}
  .top-in>a:first-child{width:fit-content}
  .top nav{flex-direction:column;gap:0;overflow:visible;padding:0}
  .top nav a{min-height:50px;padding:0 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;white-space:normal}
  .top nav a::after{content:"\203A";margin-left:auto;padding-left:10px;color:var(--accl);font-size:22px}
  .top nav a:hover{background:rgba(255,36,0,.14)}
  .bl-p-home .top nav a[href="/"],
  .bl-p-bonus .top nav a[href="/bonus-500-lado-a-lado/"],
  .bl-p-app .top nav a[href="/topx-app-ou-atalho/"],
  .bl-p-saque .top nav a[href="/saque-o-que-comparar/"],
  .bl-p-conf .top nav a[href="/topx-cassino-e-confiavel/"],
  .bl-p-sobre .top nav a[href="/sobre-o-site/"]{box-shadow:inset 5px 0 0 var(--acc)}
  .top .btn-main{order:4;margin:auto 0 0;width:100%;min-height:50px;font-size:17px}
  main,.foot{margin-left:var(--rail)}
  .foot{padding-left:var(--gut);padding-right:var(--gut)}
  .bl-hero{padding:46px var(--gut) 42px}
  .bl-hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px}
  .bl-hero-text{padding-bottom:38px}
  .bl-hero-fig img{box-shadow:12px 12px 0 var(--acc)}
  .bl-sec{padding-top:44px}
  .bl-sec h2{padding:12px 56px 12px var(--gut)}
  .bl-band{flex-direction:row;align-items:center;justify-content:space-between;gap:28px}
  .bl-end{padding:46px var(--gut) 50px}
  .foot-top{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1500px){
  .bl-sec p,.bl-end p{font-size:17.5px}
}