/* 7games-br-app.com · layout "bolso" · família B (hero central com celular + passos laterais) · prefixo ap */
:root{--ap-bg:#18201D;--ap-sf:#1C2625;--ap-dk:#0f1512;--ap-gr:#269056;--ap-gr2:#34b06b;--ap-gold:#E0A92B;--ap-mut:rgba(255,255,255,.8);--ap-line:rgba(255,255,255,.12)}
body.ap{margin:0;background:var(--ap-bg);color:#fff;font:400 17.5px/1.7 "IBM Plex Sans","Segoe UI",Arial,sans-serif;-webkit-text-size-adjust:100%}
.ap *,.ap *::before,.ap *::after{box-sizing:border-box}
.ap img{max-width:100%;height:auto;display:block}
.ap a{color:#7fdca6;text-underline-offset:3px}
.ap a:hover{color:#fff}
.ap a:focus-visible,.ap summary:focus-visible{outline:3px solid var(--ap-gold);outline-offset:3px}
.ap h1,.ap h2,.ap h3{font-family:"Archivo Narrow","Arial Narrow",Arial,sans-serif;margin:0;overflow-wrap:break-word}
.ap p{margin:0 0 16px}
.ap b{font-weight:600}
.ap code{font:500 .9em "Roboto Mono",monospace;background:#0b100d;color:var(--ap-gold);padding:2px 7px;border-radius:6px;overflow-wrap:anywhere}
.ap .shell{width:min(1120px,calc(100% - 32px));margin:0 auto}

/* botões */
.ap .btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;background:var(--ap-gr);color:#fff;text-decoration:none;font:700 18px/1.1 "Archivo Narrow",Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;border-radius:12px;text-align:center;transition:background .15s}
.ap .btn:hover{background:var(--ap-gr2);color:#fff}
.ap .btn-main{min-height:44px;padding:0 20px;font-size:17px}

/* cabeçalho com navegação segmentada */
.ap .top{position:sticky;top:0;z-index:30;background:rgba(15,21,18,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--ap-line)}
.ap .top-in{display:flex;align-items:center;gap:8px 20px;padding:7px 0}
.ap .top-in>a:first-child{display:block;line-height:0;flex:0 0 auto}
.ap .top nav{display:flex;margin:0 auto;padding:4px;background:#0b100d;border:1px solid var(--ap-line);border-radius:14px;gap:2px}
.ap .top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;color:#fff;text-decoration:none;font:600 17px/1 "Archivo Narrow",Arial,sans-serif;letter-spacing:.03em;border-radius:10px}
.ap .top nav a:hover{background:var(--ap-sf);color:#fff}

/* hero com celular */
.ap-hero{text-align:center;background:radial-gradient(ellipse 50% 60% at 50% 100%,rgba(38,144,86,.32),transparent 72%),var(--ap-bg);border-bottom:1px solid var(--ap-line);overflow:hidden}
.ap-hero-in{padding:48px 0 0;max-width:820px}
.ap-hero-theme .ap-hero-in,.ap-hero-svc .ap-hero-in{padding-bottom:42px}
.ap-hero-svc .ap-hero-in{padding-top:38px;padding-bottom:36px}
.ap-kick{display:inline-block;margin:0 0 18px;padding:5px 14px;background:var(--ap-dk);border:1px solid var(--ap-gr);border-radius:8px;color:var(--ap-gr2);font:500 16px/1.3 "Roboto Mono",monospace;letter-spacing:.04em}
.ap-hero h1{font-weight:700;font-size:clamp(33px,5.4vw,58px);line-height:1.02;letter-spacing:.005em;margin:0 0 20px;text-wrap:balance}
.ap-hero-svc h1{font-size:clamp(29px,4.2vw,44px)}
.ap-lead{font-size:clamp(17.5px,2vw,20px);line-height:1.62;color:rgba(255,255,255,.9);max-width:700px;margin:0 auto 26px}
.ap-acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 26px;margin-bottom:12px}
.ap-ghost{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font:600 18px/1 "Archivo Narrow",Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid var(--ap-gr2)}
.ap-ghost:hover{color:var(--ap-gr2)}
.ap-ad{font-size:16px;line-height:1.4;color:var(--ap-mut)}
.ap-ad-c{margin:0 0 6px}
.ap-date{margin:0 0 28px;font:400 16px/1.4 "Roboto Mono",monospace;color:rgba(255,255,255,.66)}
.ap-hero-svc .ap-date,.ap-hero-theme .ap-date{margin-bottom:18px}
.ap-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0}
.ap-chips span{padding:6px 14px;background:var(--ap-dk);border:1px solid var(--ap-line);border-radius:999px;font:500 16px/1.3 "Roboto Mono",monospace;color:var(--ap-gr2)}
.ap-phone{width:250px;height:330px;margin:6px auto 0;padding:12px 12px 0;background:#0b100d;border:2px solid #2d3a35;border-bottom:0;border-radius:42px 42px 0 0;box-shadow:0 -10px 60px rgba(38,144,86,.35)}
.ap-phone-s{height:100%;padding:34px 18px 0;background:linear-gradient(180deg,#223a2d,#18201D 70%);border-radius:32px 32px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.ap-phone-s::before{content:"";position:absolute;top:10px;left:50%;width:70px;height:8px;margin-left:-35px;border-radius:8px;background:#0b100d}
.ap-phone-s img{width:84px;height:84px;border-radius:20px;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.ap-phone-s b{font:700 24px/1 "Archivo Narrow",Arial,sans-serif;letter-spacing:.04em}
.ap-chip{display:block;width:100%;padding:8px 10px;background:#fff;color:#0f1512;border-radius:10px;font:600 16px/1.2 "IBM Plex Sans",Arial,sans-serif}
.ap-chip+.ap-chip{background:#0b100d;color:#fff;border:1px solid #3a4a43}

/* ficha técnica */
.ap-spec{background:var(--ap-dk);border-bottom:1px solid var(--ap-line)}
.ap-spec-in{display:grid;grid-template-columns:repeat(4,1fr);margin:0 auto}
.ap-spec-in>div{padding:22px 20px;border-left:1px dashed rgba(255,255,255,.2);display:flex;flex-direction:column;gap:2px}
.ap-spec-in>div:first-child{border-left:0}
.ap-spec dd{margin:0;order:1;font:500 clamp(22px,2.6vw,30px)/1.1 "Roboto Mono",monospace;color:var(--ap-gold)}
.ap-spec dt{order:2;font-size:16px;line-height:1.35;color:var(--ap-mut)}

/* miolo: passos à esquerda */
.ap-wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:44px;padding:52px 0 24px;align-items:start}
.ap-wrap-1{grid-template-columns:minmax(0,760px);justify-content:center}
.ap-toc{position:sticky;top:84px}
.ap-toc-h{margin:0 0 12px;font:500 16px/1.2 "Roboto Mono",monospace;color:var(--ap-gr2);letter-spacing:.02em}
.ap-toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.ap-toc li{counter-increment:t;position:relative;padding-left:44px}
.ap-toc li::before{content:counter(t);position:absolute;left:0;top:8px;width:30px;height:30px;border-radius:9px;background:var(--ap-sf);border:1px solid var(--ap-gr);color:var(--ap-gr2);font:500 16px/28px "Roboto Mono",monospace;text-align:center}
.ap-toc li::after{content:"";position:absolute;left:14px;top:40px;bottom:-6px;width:2px;background:var(--ap-line)}
.ap-toc li:last-child::after{display:none}
.ap-toc li a{display:block;min-height:44px;padding:9px 0;color:#fff;text-decoration:none;font-size:16px;line-height:1.35}
.ap-toc li a:hover{color:var(--ap-gr2)}
.ap-art{min-width:0}
.ap-sec{margin:0 0 20px;padding:26px 28px 12px;background:var(--ap-sf);border:1px solid var(--ap-line);border-radius:22px;scroll-margin-top:84px}
.ap-item{display:inline-block;margin:0 0 10px;padding:3px 10px;background:rgba(38,144,86,.2);color:var(--ap-gr2);border-radius:6px;font:500 16px/1.3 "Roboto Mono",monospace}
.ap-sec h2{font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1.1;letter-spacing:.005em;margin:0 0 18px}
.ap-sec h3{font-size:22px;margin:20px 0 8px}
.ap-ul,.ap-ol{margin:0 0 18px;padding:0;list-style:none}
.ap-ul li{position:relative;padding:0 0 10px 26px}
.ap-ul li::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--ap-gr2)}
.ap-ol{counter-reset:o}
.ap-ol li{counter-increment:o;position:relative;padding:0 0 12px 46px;min-height:36px}
.ap-ol li::before{content:counter(o);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:9px;border:1px solid var(--ap-gr2);color:var(--ap-gr2);font:500 17px/30px "Roboto Mono",monospace;text-align:center}
.ap-tw{overflow-x:auto;margin:0 0 20px;border-radius:14px;border:1px solid var(--ap-line)}
.ap-tb{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.ap-tb th{background:var(--ap-dk);color:var(--ap-gr2);text-align:left;font:500 16px/1.3 "Roboto Mono",monospace;padding:12px 14px;border-bottom:1px solid var(--ap-gr)}
.ap-tb td{padding:12px 14px;border-top:1px solid var(--ap-line);vertical-align:top}
.ap-tb td:first-child{font:500 16px/1.45 "Roboto Mono",monospace;color:#fff}
.ap-mid{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:20px 0 12px;padding:16px 18px;background:var(--ap-dk);border:1px solid var(--ap-gr);border-radius:16px}
.ap-mid .ap-ad{flex:1 1 220px}

/* perguntas em lista aberta */
.ap-faq{background:var(--ap-dk);border-top:1px solid var(--ap-line);padding:54px 0;margin-top:26px}
.ap-faq-in{max-width:840px}
.ap-faq h2,.ap-more h2{font-weight:700;font-size:clamp(27px,3.2vw,38px);margin:0 0 22px}
.ap-q{border-bottom:1px solid var(--ap-line)}
.ap-q summary{display:flex;align-items:center;gap:16px;min-height:60px;padding:10px 0;cursor:pointer;list-style:none}
.ap-q summary::-webkit-details-marker{display:none}
.ap-q i{order:-1;flex:0 0 30px;height:30px;border:1px solid var(--ap-gr2);border-radius:8px;color:var(--ap-gr2);font:500 20px/28px "Roboto Mono",monospace;text-align:center;font-style:normal}
.ap-q h3{font:600 21px/1.25 "Archivo Narrow",Arial,sans-serif}
.ap-q[open] i{background:var(--ap-gr);color:#fff}
.ap-q p{margin:0;padding:0 0 18px 46px;color:var(--ap-mut)}

/* fecho com ícone */
.ap-close{padding:54px 0 20px}
.ap-close-in{display:flex;align-items:center;gap:30px;padding:34px 38px;background:linear-gradient(120deg,#1f6f43,#18201D 80%);border:1px solid var(--ap-gr);border-radius:28px}
.ap-close-in img{flex:0 0 112px;width:112px;height:112px;border-radius:26px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.ap-close h2{font-weight:700;font-size:clamp(26px,3.2vw,38px);line-height:1.08;margin:0 0 10px}
.ap-close p{color:rgba(255,255,255,.88)}
.ap-close .btn{margin:4px 0 12px}

/* leia também: fichas em linha */
.ap-more{padding:40px 0 58px}
.ap-more-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ap-more-l a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;background:var(--ap-sf);border:1px solid var(--ap-line);border-left:4px solid var(--ap-gr2);border-radius:14px;text-decoration:none;color:var(--ap-mut);font-size:16px;line-height:1.5}
.ap-more-l a b{font:700 21px/1.15 "Archivo Narrow",Arial,sans-serif;color:#fff}
.ap-more-l a:hover{background:#243431}

/* rodapé */
.ap .foot{background:var(--ap-dk);border-top:1px solid var(--ap-line);padding:32px 0 40px;color:var(--ap-mut);font-size:16px;line-height:1.6}
.ap .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--ap-line)}
.ap .foot-top>a{display:block;line-height:0}
.ap .foot nav{display:flex;flex-wrap:wrap;gap:0 4px}
.ap .foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:#fff;text-decoration:none;font-size:16px}
.ap .foot nav a:hover{color:var(--ap-gr2)}
.ap .foot p{margin:0 0 10px;max-width:880px}

@media (max-width:940px){
 .ap-wrap{grid-template-columns:1fr;gap:22px;padding-top:34px}
 .ap-toc{position:static}
 .ap-toc ol{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
 .ap-toc li::after{display:none}
 .ap-spec-in{grid-template-columns:1fr 1fr}
 .ap-spec-in>div:nth-child(3){border-left:0}
 .ap-spec-in>div:nth-child(n+3){border-top:1px dashed rgba(255,255,255,.2)}
 .ap-more-l{grid-template-columns:1fr}
}
@media (max-width:720px){
 .ap .top-in{flex-wrap:wrap;justify-content:space-between}
 .ap .top nav{order:3;flex:1 0 100%;margin:0;justify-content:space-between}
 .ap .top nav a{padding:0 8px;font-size:16px;flex:1 1 auto;justify-content:center}
 .ap-hero-in{padding-top:34px}
 .ap-toc ol{grid-template-columns:1fr}
 .ap-sec{padding:20px 16px 6px;border-radius:18px}
 .ap-mid .btn,.ap-acts .btn{width:100%}
 .ap-phone{width:220px;height:290px}
 .ap-q h3{font-size:19px}
 .ap-q p{padding-left:0}
 .ap-close-in{flex-direction:column;align-items:flex-start;padding:26px 20px;gap:16px}
 .ap-close .btn{width:100%}
}