/* topxbrasil.com | family C: left rail, ribbon headings, light paper, table-first */
:root{
  --bg:#090F1E;--sf:#111A2B;--sf2:#18264a;--navy:#0d1730;
  --acc:#FF2400;--accd:#c81e00;--accl:#ff7a60;
  --paper:#f1f3f9;--card:#ffffff;--tint:#e6eaf5;--ink:#0d1426;--mut:#4a5670;--line:#d3d9e8;
  --rail:232px;
  --f:Rubik,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fh:Archivo,Rubik,system-ui,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--f);overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:var(--accd);text-underline-offset:3px}
a:hover{color:var(--acc)}
p{margin:0 0 15px}
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 24px;border-radius:4px 18px 4px 18px;font:600 16px/1.2 var(--f);text-decoration:none;text-align:center;border:0;cursor:pointer}
.btn-main{background:var(--acc);color:#fff;box-shadow:0 8px 20px rgba(255,36,0,.32)}
.btn-main:hover{background:#e01f00;color:#fff}
.gq-big{min-height:56px;padding:0 34px;font-size:18px}

/* ---------- rail (header from build.py) ---------- */
.top{background:var(--sf);color:#fff}
.shell{width:100%}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px}
.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 18px;font-size:15px;box-shadow:none}
.top nav{order:3;width:100%;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.top nav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-size:16px;white-space:nowrap}
.top nav a:hover{background:rgba(255,255,255,.18);color:#fff}
.gq-home .top nav a:nth-child(1),.gq-bonus .top nav a:nth-child(2),.gq-app .top nav a:nth-child(3),.gq-saque .top nav a:nth-child(4),.gq-conf .top nav a:nth-child(5),.gq-sobre .top nav a:nth-child(6){background:var(--acc)}

@media (min-width:1024px){
  .top{position:fixed;top:0;bottom:0;left:0;width:var(--rail);overflow-y:auto;border-right:1px solid rgba(255,255,255,.1)}
  .top::after{content:"";position:absolute;top:0;right:0;width:4px;height:100%;background:linear-gradient(180deg,var(--acc),#5f0d00 75%,transparent);pointer-events:none}
  .top-in{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:28px;min-height:100%;padding:28px 20px 28px 20px}
  .top-in>a:first-child{width:fit-content}
  .top nav{order:2;flex-direction:column;overflow:visible;gap:2px;padding:0}
  .top nav a{border-radius:0;background:transparent;min-height:48px;padding:0 12px;border-left:3px solid transparent;white-space:normal}
  .top nav a:hover{background:rgba(255,255,255,.07);border-left-color:var(--accl)}
  .gq-home .top nav a:nth-child(1),.gq-bonus .top nav a:nth-child(2),.gq-app .top nav a:nth-child(3),.gq-saque .top nav a:nth-child(4),.gq-conf .top nav a:nth-child(5),.gq-sobre .top nav a:nth-child(6){background:rgba(255,36,0,.16);border-left-color:var(--acc)}
  .top .btn-main{order:3;margin:auto 0 0 0;width:100%}
  main,.foot{margin-left:var(--rail)}
}

/* ---------- hero ---------- */
.gq-hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#090F1E 0%,#14234a 100%)}
.gq-hero::before{content:"";position:absolute;top:0;bottom:0;right:-6%;width:34%;background:linear-gradient(180deg,rgba(255,36,0,.22),rgba(255,36,0,.04));transform:skewX(-14deg);pointer-events:none}
.gq-hero-in{position:relative;max-width:1080px;margin:0 auto;padding:36px 16px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.gq-kicker{display:inline-block;margin:0 0 14px;padding:4px 12px;background:var(--acc);color:#fff;font:700 13px/1.5 var(--fh);letter-spacing:.09em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);padding-right:22px}
.gq-hero h1{font-size:clamp(28px,6.6vw,42px);line-height:1.12;font-weight:800;letter-spacing:-.01em;margin-bottom:18px}
.gq-lead{font-size:18px;line-height:1.65;color:rgba(255,255,255,.88);margin-bottom:6px}
.gq-hero-fig{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.5)}
.gq-hero-fig img{width:100%;height:auto}
.gq-hero-a .gq-hero-fig{max-width:300px;justify-self:center;background:linear-gradient(160deg,#1c2f5c,#0e1a38)}
.gq-hero-plain .gq-hero-in{padding-top:40px;padding-bottom:44px}
.gq-hero-plain .gq-hero-txt{max-width:760px;border-left:6px solid var(--acc);padding-left:20px}
.gq-hero-b::before{right:auto;left:-10%;width:22%;transform:skewX(14deg)}
.gq-date{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.62);letter-spacing:.02em}

@media (min-width:900px){
  .gq-hero-in{padding:56px 40px 60px;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:44px}
  .gq-hero-plain .gq-hero-in{grid-template-columns:minmax(0,1fr)}
  .gq-hero-a .gq-hero-fig{max-width:340px}
}

/* ---------- CTA wrapper ---------- */
.gq-cta{margin:22px 0 4px}
.gq-ad{display:block;margin-top:9px;font-size:13px;line-height:1.4;opacity:.74}

/* ---------- sections and ribbon headings ---------- */
.gq-sec{max-width:1000px;margin:0 auto;padding:40px 16px 6px}
.gq-sec p{max-width:760px}
.gq-sec h2,.gq-close h2{font-weight:800;font-size:clamp(21px,5vw,26px);line-height:1.25}
.gq-sec h2{position:relative;width:fit-content;max-width:calc(100% + 16px);margin:0 0 22px -16px;padding:12px 52px 12px 20px;background:var(--navy);color:#fff;border-left:8px solid var(--acc);clip-path:polygon(0 0,100% 0,calc(100% - 24px) 50%,100% 100%,0 100%)}
.gq-sec ul,.gq-sec ol{max-width:760px}
@media (min-width:900px){
  .gq-sec{padding:52px 40px 8px}
  .gq-sec h2{margin-left:-40px;max-width:calc(100% + 40px);padding-left:34px}
}

/* ---------- chips ---------- */
.gq-chip{display:inline-block;padding:2px 11px;border-radius:999px;font:600 14px/1.5 var(--f);white-space:nowrap;vertical-align:baseline}
.gq-ok{background:var(--navy);color:#fff}
.gq-no{background:var(--acc);color:#fff}
.gq-ck{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}

/* ---------- tables ---------- */
.gq-tw{margin:0 0 20px}
.gq-t{width:100%;border-collapse:collapse;background:var(--card);font-size:16px;line-height:1.55}
.gq-t caption{caption-side:top;text-align:left;padding:0 0 8px;font:700 13px/1.4 var(--fh);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.gq-t thead th{background:var(--navy);color:#fff;text-align:left;font:600 15px/1.4 var(--f);padding:12px 14px}
.gq-t tbody th,.gq-t tbody td{padding:13px 14px;vertical-align:top;border-bottom:1px solid var(--line);text-align:left}
.gq-t tbody th{width:24%;background:var(--tint);color:var(--navy);font-weight:600}
.gq-t tbody tr:nth-child(even) td{background:#f8f9fd}
.gq-t-num td{font-variant-numeric:tabular-nums;font-family:var(--fh);font-weight:600}
.gq-note{margin:0 0 20px;padding:14px 18px;background:var(--tint);border-left:5px solid var(--acc);color:var(--ink);font-size:16px}
.gq-note a{font-weight:600}

@media (max-width:760px){
  .gq-t,.gq-t tbody,.gq-t tr,.gq-t th,.gq-t td{display:block;width:100%}
  .gq-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gq-t{background:transparent}
  .gq-t caption{display:block}
  .gq-t tbody tr{margin:0 0 12px;background:var(--card);box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line)}
  .gq-t tbody th{width:100%;border-bottom:0;padding:11px 14px}
  .gq-t tbody td{border-bottom:0;padding:9px 14px}
  .gq-t tbody td+td{padding-top:0}
  .gq-t tbody tr:nth-child(even) td{background:transparent}
  .gq-t td::before{content:attr(data-label);display:block;margin-bottom:1px;font:700 12px/1.4 var(--fh);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
  .gq-t-num td{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .gq-t-num td::before{margin:0}
}

/* ---------- lists ---------- */
.gq-steps{counter-reset:gqs;list-style:none;margin:0 0 20px;padding:0}
.gq-steps li{counter-increment:gqs;position:relative;margin:0 0 12px;padding:4px 0 4px 54px;min-height:40px}
.gq-steps li::before{content:counter(gqs);position:absolute;left:0;top:0;width:40px;height:40px;display:grid;place-items:center;background:var(--navy);color:#fff;font:800 18px/1 var(--fh);clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%)}
.gq-fig{margin:6px 0 22px;max-width:760px}
.gq-fig img{width:100%;border-radius:14px;box-shadow:0 12px 30px rgba(13,23,48,.22)}

/* ---------- strip and closing block ---------- */
.gq-strip{display:flex;flex-direction:column;gap:6px;margin:38px 0 8px;padding:26px 16px;background:linear-gradient(100deg,#0d1730,#1a2c58);color:#fff;border-top:5px solid var(--acc)}
.gq-strip p{margin:0;max-width:640px;font-size:18px}
.gq-strip .gq-cta{margin:10px 0 0}
@media (min-width:900px){
  .gq-strip{flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding:28px max(40px,calc((100% - 920px)/2))}
  .gq-strip .gq-cta{margin:0;flex:0 0 auto}
}
.gq-close{margin:44px 0 0;padding:52px 16px 58px;text-align:center;color:#fff;background:radial-gradient(900px 300px at 50% 0,rgba(255,36,0,.28),transparent 70%),var(--bg)}
.gq-close h2{font-size:clamp(24px,6vw,34px);margin-bottom:12px}
.gq-close p{max-width:620px;margin:0 auto 6px;color:rgba(255,255,255,.84)}
.gq-close .gq-cta{margin-top:24px}

/* ---------- faq ---------- */
.gq-faq details{background:var(--card);margin:0 0 10px;box-shadow:0 0 0 1px var(--line);max-width:760px}
.gq-faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:8px 16px;cursor:pointer;list-style:none}
.gq-faq summary::-webkit-details-marker{display:none}
.gq-faq summary h3{font:600 17px/1.4 var(--f);color:var(--navy)}
.gq-faq summary i{flex:0 0 28px;height:28px;display:grid;place-items:center;background:var(--acc);color:#fff;font:700 20px/1 var(--f);font-style:normal;transition:transform .2s}
.gq-faq details[open] summary i{transform:rotate(45deg)}
.gq-faq details p{margin:0;padding:2px 16px 16px;max-width:none}

/* ---------- footer ---------- */
.foot{background:#060b16;color:rgba(255,255,255,.8);padding:38px 0 44px;font-size:16px;line-height:1.65}
.foot .shell{max-width:1000px;margin:0 auto;padding:0 16px}
.foot p{max-width:780px;margin:0 0 10px}
.foot-top{display:flex;flex-direction:column;gap:20px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-top>a{display:block;width:fit-content}
.foot-top img{width:95px;height:40px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 8px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:#fff;text-decoration:none;background:rgba(255,255,255,.07)}
.foot nav a:hover{background:rgba(255,36,0,.3)}
@media (min-width:900px){.foot .shell{padding:0 40px}}