/* SITES & WEB — terminal azul-noite: ciano e verde-menta */
body.t-web{--bg:#04101b;--fg:#e9f6ff;--muted:#8fb0c6;--line:rgba(120,200,255,.18);--accent:#33c6ff;--accent-2:#7dffb3;--accent-ink:#04101b;--card:#0a1c2c;background:var(--bg)}
.t-web .dark{--bg:#04101b;--card:#0a1c2c;background:var(--bg)}
.t-web .light{--bg:#e8f4fb;--fg:#06202f;--muted:#4a6679;--line:rgba(6,32,47,.15);--card:#fff;--accent:#0a84c6;--accent-ink:#fff}
.whero{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(24px,4vw,70px);align-items:end}
.t-web .shero h1{max-width:10ch;font-size:clamp(46px,8vw,140px)}
.editor{border-radius:18px;background:rgba(4,16,27,.82);backdrop-filter:blur(10px);box-shadow:0 40px 100px -30px #000,inset 0 0 0 1px rgba(120,200,255,.25);overflow:hidden;font-family:var(--f-code);font-size:clamp(11px,.95vw,14px)}
.ed-bar{display:flex;gap:7px;align-items:center;padding:12px 16px;background:rgba(120,200,255,.08)}
.ed-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.ed-bar i:nth-child(2){background:#febc2e}.ed-bar i:nth-child(3){background:#28c840}
.ed-bar span{margin-left:10px;color:var(--muted)}
.editor pre{padding:18px 20px;line-height:1.8;min-height:280px;white-space:pre-wrap;color:#cfe8f7}
.k{color:#7dffb3}.s{color:#ffd166}.f{color:#33c6ff}.c{color:#5b7a8f}.n{color:#ff8fb0}
.cursor-b{display:inline-block;width:8px;height:1.1em;background:#33c6ff;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media(max-width:900px){.whero{grid-template-columns:1fr}.editor{display:none}}
/* antes/depois */
.ba-box{max-width:1180px;margin-inline:auto;user-select:none;touch-action:pan-y}
.ba-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.ba-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ba-clip{position:absolute;inset:0;width:50%;overflow:hidden}
.ba-clip img{width:var(--w,1180px);max-width:none}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--accent);margin-left:-1.5px;cursor:ew-resize}
.ba-handle span{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px rgba(51,198,255,.25);display:grid;place-items:center}
.ba-handle span::before{content:"◀ ▶";font-size:10px;color:#04101b;letter-spacing:2px}
.ba-img em{position:absolute;top:14px;padding:6px 12px;border-radius:99px;background:rgba(0,0,0,.7);font-style:normal;font-size:11px;color:#fff;z-index:2}
.ba-img em.l{left:14px}.ba-img em.r{right:14px}
.ba-cap{margin:20px auto 0;max-width:1180px;color:var(--muted)}
.browser{position:relative;border-radius:16px;overflow:hidden;background:#1b1b1f;box-shadow:0 50px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
.browser>i{display:block;height:34px;background:#232328;position:relative}
.browser>i::before{content:"";position:absolute;left:14px;top:12px;width:10px;height:10px;border-radius:50%;background:#ff5f57;box-shadow:16px 0 #febc2e,32px 0 #28c840}
/* corrida */
.spd-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);align-items:center}
.spd .btn{margin-top:22px}
.race{display:grid;gap:22px}
.lane{display:grid;gap:10px}
.lane .bar{height:34px;border-radius:99px;background:rgba(6,32,47,.1);overflow:hidden}
.lane .bar i{display:block;height:100%;width:0;border-radius:99px;background:#9bb3c4}
.lane.good .bar i{background:linear-gradient(90deg,#0a84c6,#2ee6a8)}
.lane b{font-size:clamp(34px,4vw,62px);font-variant-numeric:tabular-nums;line-height:1}
@media(max-width:900px){.spd-grid{grid-template-columns:1fr}}
/* pilha */
.stk .marq{padding:10px 0}
.stk .marq .tr{font-weight:600;letter-spacing:-.02em}
/* personalidade */
.per-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pc{position:relative;border-radius:26px;min-height:420px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;background:linear-gradient(160deg,var(--a),var(--b));color:#fff;overflow:hidden;transition:transform .6s var(--ease),border-radius .6s var(--ease)}
.pc:hover{transform:translateY(-12px) rotate(-1deg);border-radius:60px 26px 60px 26px}
.pc b{font-size:clamp(34px,3.2vw,52px)}
.pc p{opacity:.85;font-size:15px}
.pc::before{content:"";position:absolute;inset:-30% -30% auto auto;width:80%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.18);filter:blur(30px);transition:transform .8s var(--ease)}
.pc:hover::before{transform:translate(-30px,40px) scale(1.2)}
@media(max-width:1000px){.per-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.per-grid{grid-template-columns:1fr}}
.faq-s{background:var(--bg)}

.stk .dimr{opacity:.55}
.stk .marq .tr span::after{background:var(--accent-2)}
.ba-handle{pointer-events:none}
.ba-img{cursor:ew-resize}