/* 7games-app-br.com · "bolso" (família D, prefixo bl) */
:root{--bl-bg:#18201D;--bl-sf:#1C2625;--bl-dk:#0f1513;--bl-gr:#269056;--bl-gr2:#2fae6b;--bl-au:#E0A92B;--bl-paper:#edf3ee;--bl-ink:#13211a;--bl-mut:rgba(255,255,255,.77);--bl-line:rgba(255,255,255,.14)}
body.bl{margin:0;background:var(--bl-bg);color:#fff;font:400 17.5px/1.7 "IBM Plex Sans","Segoe UI",Arial,sans-serif;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
.bl *,.bl *::before,.bl *::after{box-sizing:border-box}
.bl img{max-width:100%;height:auto;display:block}
.bl a{color:#74e3a6;text-underline-offset:3px}
.bl a:hover{color:#fff}
.bl h1,.bl h2,.bl h3{font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif;font-weight:700;margin:0;overflow-wrap:break-word}
.bl p{margin:0 0 16px}
.bl .shell{width:min(1100px,calc(100% - 32px));margin:0 auto}
.bl a:focus-visible,.bl summary:focus-visible{outline:3px solid var(--bl-au);outline-offset:3px}

/* botões */
.bl .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;background:var(--bl-gr);color:#fff;text-decoration:none;font:600 16.5px/1.1 "IBM Plex Sans",Arial,sans-serif;border-radius:8px;border:2px solid var(--bl-gr);text-align:center;transition:background .15s}
.bl .btn::after{content:"\2192";font-family:"Roboto Mono",monospace}
.bl .btn:hover{background:var(--bl-gr2);border-color:var(--bl-gr2);color:#fff}
.bl .btn-main{min-height:44px;padding:0 18px}
.bl .bl-btn-ink{background:var(--bl-ink);border-color:var(--bl-ink)}
.bl .bl-btn-ink:hover{background:#0b140f;border-color:#0b140f}

/* cabeçalho de barra */
.bl .top{position:sticky;top:0;z-index:30;background:rgba(15,21,19,.96);backdrop-filter:blur(8px);border-bottom:2px solid var(--bl-gr)}
.bl .top-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 22px;padding:8px 0}
.bl .top-in>a:first-child{display:block;line-height:0;min-height:44px;padding:2px 0}
.bl .top nav{display:flex;gap:2px}
.bl .top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:#fff;text-decoration:none;font:600 16px/1 "IBM Plex Sans",Arial,sans-serif}
.bl .top nav a::before{content:"/";margin-right:6px;color:var(--bl-gr2);font-family:"Roboto Mono",monospace;font-weight:700}
.bl .top nav a:hover{color:var(--bl-au)}

/* hero com celular */
.bl-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 50% 80% at 85% 50%,rgba(38,144,86,.4),transparent 70%),radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.3px) 0 0/26px 26px,var(--bl-bg);border-bottom:1px solid var(--bl-line)}
.bl-hero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center;padding:64px 0 70px}
.bl-hero-sm .bl-hero-in{grid-template-columns:minmax(0,1fr);padding:46px 0 52px}
.bl-hero-doc .bl-hero-in{padding:38px 0 42px}
.bl-kick{display:inline-block;margin:0 0 18px;padding:6px 12px;border:1px solid var(--bl-gr2);color:#74e3a6;font:500 14.5px/1.3 "Roboto Mono",monospace;letter-spacing:.06em;text-transform:uppercase;border-radius:6px}
.bl-hero h1{font-weight:700;font-size:clamp(31px,4.8vw,54px);line-height:1.1;letter-spacing:-.02em;margin:0 0 22px}
.bl-hero-sm h1{font-size:clamp(28px,3.8vw,44px)}
.bl-lead{font-size:clamp(17.5px,1.7vw,19.5px);line-height:1.64;color:rgba(255,255,255,.93);max-width:650px;margin-bottom:26px}
.bl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;margin-bottom:14px}
.bl-jump{display:inline-flex;align-items:center;min-height:44px;color:#fff;font:500 16px/1 "Roboto Mono",monospace;text-decoration:none;border-bottom:1px dashed var(--bl-au)}
.bl-jump:hover{color:var(--bl-au)}
.bl-ad{margin:0 0 8px;font-size:15.5px;line-height:1.4;color:var(--bl-mut)}
.bl-date{margin:0;font:400 15px/1.4 "Roboto Mono",monospace;color:var(--bl-mut)}
.bl-phone{justify-self:center;width:250px;padding:10px;background:#0a0f0d;border-radius:42px;box-shadow:0 0 0 2px #2b3a33,0 40px 70px -20px rgba(0,0,0,.8),0 0 60px -10px rgba(38,144,86,.5);transform:rotate(3deg);position:relative}
.bl-phone::before{content:"";position:absolute;top:18px;left:50%;width:70px;height:18px;margin-left:-35px;background:#0a0f0d;border-radius:12px;z-index:1}
.bl-phone-body{min-height:440px;padding:62px 18px 24px;background:linear-gradient(170deg,#24493a,#18201D 70%);border-radius:32px;text-align:center}
.bl-phone-body img{width:96px;height:96px;margin:0 auto 22px;border-radius:22px;box-shadow:0 12px 24px -10px rgba(0,0,0,.7)}
.bl-phone-body p{margin:0}
.bl-phone-l1{margin-top:14px!important;padding:11px 12px 0;background:rgba(255,255,255,.08);border-radius:12px 12px 0 0;font:600 16px/1.2 "IBM Plex Sans",Arial,sans-serif;color:#fff}
.bl-phone-l2{padding:2px 12px 11px;background:rgba(255,255,255,.08);border-radius:0 0 12px 12px;font:400 15px/1.3 "Roboto Mono",monospace;color:#cfe9da}

/* seções em linha do tempo */
.bl-sec{padding:62px 0}
.bl-paper{background:var(--bl-paper);color:var(--bl-ink)}
.bl-tl{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 26px;align-items:start}
.bl-tl::before{content:"";position:absolute;left:29px;top:68px;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--bl-gr) 0 8px,transparent 8px 14px);opacity:.7}
.bl-node{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--bl-gr);color:#fff;border-radius:14px;font:700 22px/1 "Roboto Mono",monospace;box-shadow:0 10px 22px -10px rgba(38,144,86,.9);user-select:none}
.bl-body{max-width:800px;padding-bottom:6px}
.bl-body h2,.bl-faq-sec h2{font-size:clamp(24px,3vw,34px);line-height:1.18;letter-spacing:-.01em;margin:6px 0 18px}
.bl-body>p{color:rgba(255,255,255,.9)}
.bl-intro{font-size:19px;color:#fff!important}
.bl-note{font-size:15.5px;color:var(--bl-mut)!important}
.bl-paper .bl-body>p,.bl-paper .bl-intro{color:var(--bl-ink)!important}
.bl-paper a{color:#136b3e}
.bl-paper a:hover{color:#000}
.bl-paper h2{color:#0c2a1b}
.bl-paper .bl-btn-ink{color:#fff}
.bl-mono{font-family:"Roboto Mono",monospace}

/* listas */
.bl-list{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:10px}
.bl-list li{position:relative;padding:14px 16px 14px 52px;background:rgba(255,255,255,.05);border:1px solid var(--bl-line);border-radius:10px;color:rgba(255,255,255,.93)}
.bl-list li::before{content:"\2713";position:absolute;left:16px;top:14px;color:var(--bl-gr2);font:700 18px/1.6 "Roboto Mono",monospace}
.bl-warn li::before{content:"!";color:#b8761a}
.bl-paper .bl-list li{background:#fff;border-color:#cfdcd3;color:var(--bl-ink)}
.bl-paper .bl-list li b{color:#0c2a1b}
.bl-steps{list-style:none;counter-reset:bs;margin:12px 0 22px;padding:0;display:grid;gap:10px}
.bl-steps li{counter-increment:bs;position:relative;padding:14px 16px 14px 62px;background:rgba(255,255,255,.05);border:1px solid var(--bl-line);border-radius:10px;color:rgba(255,255,255,.93)}
.bl-steps li::before{content:counter(bs);position:absolute;left:14px;top:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bl-au);color:#18201D;border-radius:8px;font:700 17px/1 "Roboto Mono",monospace}
.bl-paper .bl-steps li{background:#fff;border-color:#cfdcd3;color:var(--bl-ink)}
.bl-body b{color:#fff}

/* tabelas de ficha */
.bl-tbl-wrap{margin:14px 0 14px;border:1px solid var(--bl-line);border-radius:12px;overflow-x:auto;background:var(--bl-sf)}
.bl-tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.bl-tbl th{padding:12px 14px;text-align:left;background:var(--bl-dk);color:#74e3a6;font:500 14.5px/1.2 "Roboto Mono",monospace;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--bl-gr)}
.bl-tbl td{padding:12px 14px;border-top:1px solid var(--bl-line);color:rgba(255,255,255,.93);vertical-align:top}
.bl-tbl td:first-child{font-weight:600;color:#fff}
.bl-tbl td.bl-mono{color:var(--bl-au);overflow-wrap:anywhere}
.bl-paper .bl-tbl-wrap{background:#fff;border-color:#cfdcd3}
.bl-paper .bl-tbl th{background:#dfeae3;color:#0c2a1b}
.bl-paper .bl-tbl td{color:var(--bl-ink);border-color:#dbe6df}
.bl-paper .bl-tbl td:first-child{color:#0c2a1b}

/* faixa */
.bl-mid{background:radial-gradient(rgba(255,255,255,.12) 1.2px,transparent 1.3px) 0 0/22px 22px,linear-gradient(100deg,#1a6b40,#269056)}
.bl-mid-in{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;padding:34px 0}
.bl-mid h2{font-size:clamp(22px,2.7vw,30px);margin-bottom:6px}
.bl-mid p{margin:0;color:rgba(255,255,255,.95)}
.bl-mid .bl-ad{margin:10px 0 0;color:rgba(255,255,255,.9)}
.bl-mid .btn{background:#fff;border-color:#fff;color:#0c3a22}
.bl-mid .btn:hover{background:#e7f6ed;color:#0c3a22}
.bl-mid-act{flex:none}

/* perguntas */
.bl-faq-sec{padding:62px 0 76px;background:var(--bl-dk);border-top:1px solid var(--bl-line)}
.bl-faq-sec h2{margin:0 0 22px}
.bl-faq{max-width:860px;border-top:1px solid var(--bl-line)}
.bl-faq details{border-bottom:1px solid var(--bl-line)}
.bl-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:58px;padding:10px 4px;cursor:pointer}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary h3{font:600 18.5px/1.38 "IBM Plex Sans",Arial,sans-serif;color:#fff}
.bl-faq summary i{flex:none;font:500 26px/1 "Roboto Mono",monospace;color:var(--bl-gr2);font-style:normal;transition:transform .2s}
.bl-faq details[open] summary i{transform:rotate(45deg)}
.bl-faq details p{padding:0 36px 18px 4px;margin:0;color:rgba(255,255,255,.88)}

/* rodapé */
.bl .foot{background:#0b100e;border-top:2px solid var(--bl-gr);padding:32px 0 40px;color:var(--bl-mut);font-size:15.5px;line-height:1.6}
.bl .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px;margin-bottom:16px}
.bl .foot-top>a{display:block;line-height:0;min-height:44px}
.bl .foot nav{display:flex;flex-wrap:wrap;gap:0 6px}
.bl .foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:#fff;text-decoration:none;font-size:15.5px}
.bl .foot nav a::before{content:"/";margin-right:5px;color:var(--bl-gr2);font-family:"Roboto Mono",monospace}
.bl .foot nav a:hover{color:var(--bl-au)}
.bl .foot p{margin:0 0 8px;max-width:860px}

/* celular */
@media (max-width:860px){
  .bl-hero-in{grid-template-columns:minmax(0,1fr);gap:34px;padding:40px 0 54px}
  .bl-phone{justify-self:start;margin-left:8px}
  .bl-mid-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:620px){
  .bl .top-in{grid-template-columns:1fr auto;grid-template-areas:"logo cta" "nav nav"}
  .bl .top-in>a:first-child{grid-area:logo}
  .bl .top .btn-main{grid-area:cta;padding:0 14px;font-size:15px}
  .bl .top nav{grid-area:nav;justify-content:space-between;border-top:1px solid var(--bl-line)}
  .bl .top nav a{padding:0 4px;font-size:15px}
  .bl .top nav a::before{margin-right:3px}
  .bl-sec{padding:48px 0}
  .bl-tl{grid-template-columns:minmax(0,1fr);gap:14px}
  .bl-tl::before{display:none}
  .bl-node{width:48px;height:48px;font-size:19px;border-radius:12px}
  .bl-body h2{margin-top:0}
  .bl-tbl th,.bl-tbl td{padding:10px 8px;font-size:15.5px}
  .bl-tbl th{font-size:14.5px;letter-spacing:.02em}
  .bl-faq summary h3{font-size:17.5px}
  .bl .btn{width:100%;max-width:360px}
  .bl .top .btn-main{width:auto}
  .bl-list li{padding-left:46px}
  .bl-list li::before{left:14px}
  .bl-steps li{padding-left:56px}
}