/* Página Acesso Remoto (04/10/2026) — tudo com prefixo ar- para não colidir com style.css */
.ar { --ar-line: rgba(147, 51, 234, .22); --ar-soft: rgba(147, 51, 234, .10); --ar-ok: #22c55e; --ar-cyan: #22d3ee; }
.ar section { position: relative; }
.ar-sec { padding: 5.5rem 0; }
.ar-sec.alt { background: var(--bg-darker); }
.ar-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.ar-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15; margin: .75rem 0 1rem; }
.ar-head p { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.7; }
.ar p, .ar li { line-height: 1.7; }
.ar a.ar-link { color: var(--primary-light); }

/* ---------- HERO ---------- */
.ar-hero { padding: 9.5rem 0 4.5rem; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 70% 30%, rgba(147, 51, 234, .22), transparent 70%), var(--gradient-hero); }
.ar-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); pointer-events: none; }
.ar-hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 3.5rem; align-items: center; }
.ar-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1rem; border-radius: 999px; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .35); color: #86efac; font-weight: 600; font-size: .88rem; }
.ar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-ok); box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: arPulse 1.8s infinite; }
@keyframes arPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.65); } 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.ar-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 1.2rem 0 1.2rem; letter-spacing: -.01em; }
.ar-hero .ar-lead { font-size: 1.15rem; color: var(--text-secondary); max-width: 560px; }
.ar-trio { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem 0 2rem; }
.ar-trio span { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-weight: 600; font-size: .92rem; }
.ar-trio span b { color: var(--primary-light); font-weight: 700; }
.ar-trio span.is-new { background: var(--ar-soft); border-color: var(--ar-line); }
.ar-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.ar-cta-row .btn { display: inline-flex; align-items: center; gap: .55rem; }
.ar-mini { margin-top: 1.1rem; font-size: .88rem; color: var(--text-muted); }

/* cena animada do hero: notebook -> sinal -> TV */
.ar-scene { position: relative; aspect-ratio: 16 / 11.5; }
.ar-tv { position: absolute; right: 0; top: 2%; width: 74%; aspect-ratio: 16 / 9.6; background: #08080f; border-radius: 14px; border: 2px solid #2b2b44; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(147,51,234,.18); padding: 2.4%; }
.ar-tv::after { content: ""; position: absolute; left: 50%; bottom: -9%; width: 26%; height: 9%; transform: translateX(-50%); background: linear-gradient(#24243a, #14141f); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.ar-tv-screen { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: #0b1730 url("../images/acesso-remoto/dev_clima.webp") center / cover no-repeat; }
.ar-tv-box { position: absolute; right: 6%; bottom: -16%; width: 15%; aspect-ratio: 3 / 1; border-radius: 6px; background: linear-gradient(#22223a, #12121e); border: 1px solid #34345a; display: flex; align-items: center; justify-content: flex-end; padding-right: 8%; }
.ar-tv-box i { width: 6px; height: 6px; border-radius: 50%; background: var(--ar-ok); box-shadow: 0 0 8px var(--ar-ok); }
.ar-tv-tag { position: absolute; left: 3.5%; top: 3.5%; display: flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.ar-ripple { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.ar-scene.run .ar-ripple { animation: arRipple 4.8s infinite; }
.ar-scene.run .ar-ripple.r2 { animation-delay: 2.4s; }
@keyframes arRipple { 0%, 38% { opacity: 0; transform: scale(.3); } 42% { opacity: 1; transform: scale(.6); } 58% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; } }
.ar-lap { position: absolute; left: 0; bottom: 4%; width: 54%; z-index: 2; }
.ar-lap-scr { aspect-ratio: 16 / 10; background: #12121f; border: 2px solid #34345a; border-bottom: none; border-radius: 10px 10px 0 0; padding: 3%; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.ar-lap-ui { position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; background: #171728; display: grid; grid-template-columns: 1fr 28%; gap: 4%; padding: 4%; }
.ar-lap-live { position: relative; border-radius: 3px; background: #0b1730 url("../images/acesso-remoto/dev_clima.webp") center / cover no-repeat; overflow: hidden; }
.ar-lap-live::after { content: "AO VIVO"; position: absolute; left: 5%; top: 7%; font-size: .45rem; font-weight: 800; color: #fff; background: #16a34a; padding: 1px 4px; border-radius: 3px; letter-spacing: .05em; }
.ar-lap-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6%; align-content: start; }
.ar-lap-pad b { display: block; aspect-ratio: 1; border-radius: 3px; background: #26263f; }
.ar-lap-pad b.ok { background: var(--primary); }
.ar-lap-pad b:nth-child(1), .ar-lap-pad b:nth-child(3), .ar-lap-pad b:nth-child(7), .ar-lap-pad b:nth-child(9) { visibility: hidden; }
.ar-lap-base { height: 9px; margin: 0 -6%; background: linear-gradient(#3a3a5c, #1e1e30); border-radius: 0 0 12px 12px; }
.ar-cursor { position: absolute; width: 16px; height: 16px; left: 30%; top: 40%; z-index: 3; pointer-events: none; }
.ar-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.ar-scene.run .ar-cursor { animation: arCursor 4.8s infinite ease-in-out; }
@keyframes arCursor { 0% { left: 18%; top: 62%; } 35% { left: 34%; top: 38%; } 40% { left: 34%; top: 38%; transform: scale(.85); } 45% { transform: scale(1); } 60% { left: 80%; top: 56%; } 85% { left: 80%; top: 56%; } 100% { left: 18%; top: 62%; } }
.ar-beam { position: absolute; left: 40%; top: 46%; width: 30%; height: 2px; z-index: 1; transform: rotate(-24deg); transform-origin: left center; background: linear-gradient(90deg, transparent, rgba(168,85,247,.6), transparent); }
.ar-beam i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #c084fc; box-shadow: 0 0 12px #a855f7; opacity: 0; }
.ar-scene.run .ar-beam i { animation: arPacket 1.6s infinite linear; }
.ar-scene.run .ar-beam i:nth-child(2) { animation-delay: .53s; }
.ar-scene.run .ar-beam i:nth-child(3) { animation-delay: 1.06s; }
@keyframes arPacket { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.ar-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: 12px; background: rgba(20, 20, 36, .92); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 30px rgba(0,0,0,.45); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.ar-chip small { display: block; color: var(--text-muted); font-weight: 500; font-size: .7rem; }
.ar-chip .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--ar-soft); color: var(--primary-light); flex-shrink: 0; }
.ar-chip .ic svg { width: 16px; height: 16px; }
.ar-chip.c1 { left: 52%; top: -4%; }
.ar-chip.c2 { right: -2%; bottom: 0; }
.ar-scene.run .ar-chip { animation: arFloat 6s infinite ease-in-out; }
.ar-scene.run .ar-chip.c2 { animation-delay: -3s; }
@keyframes arFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- faixa de pilares ---------- */
.ar-band { border-top: 1px solid var(--ar-line); border-bottom: 1px solid var(--ar-line); background: linear-gradient(135deg, rgba(147,51,234,.12), rgba(99,102,241,.06)); padding: 2.2rem 0; }
.ar-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ar-band-item { display: flex; gap: .9rem; align-items: flex-start; }
.ar-band-item .n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.ar-band-item p { margin: 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.45; }

/* ---------- jornada: gerenciar / administrar / acessar ---------- */
.ar-journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: j; }
.ar-jcard { position: relative; padding: 2rem 1.75rem; border-radius: var(--radius-lg); background: var(--gradient-card); border: 1px solid rgba(255,255,255,.06); }
.ar-jcard .k { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ar-jcard h3 { font-size: 1.35rem; margin: .4rem 0 .7rem; }
.ar-jcard p { color: var(--text-secondary); margin: 0; font-size: .97rem; }
.ar-jcard.is-new { border-color: rgba(168,85,247,.55); box-shadow: 0 0 0 1px rgba(168,85,247,.25), 0 20px 60px rgba(147,51,234,.25); }
.ar-jcard.is-new .k { color: #c4b5fd; }
.ar-new { position: absolute; top: 1.2rem; right: 1.2rem; font-size: .7rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #eab308); color: #3b2503; letter-spacing: .04em; }

/* ---------- vídeo ---------- */
.ar-video { max-width: 980px; margin: 0 auto; border-radius: 20px; overflow: hidden; border: 1px solid var(--ar-line); box-shadow: 0 30px 90px rgba(147,51,234,.25); background: #000; }
.ar-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

/* ---------- recursos ---------- */
.ar-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ar-feat { padding: 1.6rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); transition: transform .3s ease, border-color .3s ease; }
.ar-feat:hover { transform: translateY(-4px); border-color: var(--ar-line); }
.ar-feat .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--ar-soft); color: var(--primary-light); margin-bottom: 1rem; }
.ar-feat .ic svg { width: 22px; height: 22px; }
.ar-feat h3 { font-size: 1.08rem; margin: 0 0 .45rem; }
.ar-feat p { margin: 0; color: var(--text-secondary); font-size: .93rem; }

/* ---------- print real do painel ---------- */
.ar-shot { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center; }
.ar-shot figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ar-shot img { display: block; width: 100%; height: auto; }
.ar-shot figcaption { padding: .7rem 1rem; font-size: .82rem; color: var(--text-muted); background: #12121f; }
.ar-list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.ar-list li { position: relative; padding-left: 1.9rem; margin: .65rem 0; color: var(--text-secondary); }
.ar-list li::before { content: ""; position: absolute; left: 0; top: .32rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: rgba(34,197,94,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 62% no-repeat; }
.ar-list li strong { color: var(--text-primary); }

/* ---------- passos (3) ---------- */
.ar-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ar-step { position: relative; padding: 2rem 1.6rem 1.6rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); }
.ar-step .num { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--gradient-primary); margin-bottom: 1rem; box-shadow: 0 8px 24px rgba(147,51,234,.4); }
.ar-step h3 { font-size: 1.12rem; margin: 0 0 .5rem; }
.ar-step p { margin: 0; color: var(--text-secondary); font-size: .95rem; }
.ar-req { margin-top: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ar-req div { padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.12); font-size: .9rem; color: var(--text-secondary); }
.ar-req div strong { display: block; color: var(--text-primary); margin-bottom: .2rem; }

/* ---------- guia por aparelho (abas + simulador) ---------- */
.ar-tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2rem; }
.ar-tab { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.15rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--text-secondary); font: 600 .95rem var(--font-primary); transition: all .25s ease; }
.ar-tab svg { width: 18px; height: 18px; }
.ar-tab small { font-weight: 500; opacity: .75; }
.ar-tab:hover { color: var(--text-primary); border-color: var(--ar-line); }
.ar-tab[aria-selected="true"] { color: #fff; background: var(--gradient-primary); border-color: transparent; box-shadow: 0 10px 30px rgba(147,51,234,.35); }
.ar-pane { display: none; }
.ar-pane.is-on { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: start; animation: arIn .45s ease; }
@keyframes arIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ar-pane h3 { font-size: 1.4rem; margin: 0 0 .35rem; }
.ar-pane .sub { color: var(--text-muted); font-size: .92rem; margin: 0 0 1.2rem; }
.ar-ol { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.ar-ol li { counter-increment: s; position: relative; padding: .7rem .8rem .7rem 3rem; margin: 0 0 .45rem; border-radius: 12px; color: var(--text-secondary); font-size: .95rem; border: 1px solid transparent; transition: background .3s, border-color .3s; cursor: pointer; }
.ar-ol li::before { content: counter(s); position: absolute; left: .75rem; top: .72rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; background: rgba(255,255,255,.07); color: var(--text-primary); }
.ar-ol li strong { color: var(--text-primary); }
.ar-ol li.is-now { background: var(--ar-soft); border-color: var(--ar-line); color: var(--text-primary); }
.ar-ol li.is-now::before { background: var(--primary); }
.ar-ol code, .ar code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; background: rgba(255,255,255,.07); padding: .1rem .35rem; border-radius: 5px; color: #e9d5ff; word-break: break-word; }
.ar-tip { margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.22); color: #a5f3fc; font-size: .9rem; }
.ar-tip strong { color: #e0f2fe; }

/* simulador */
.ar-sim { position: sticky; top: 96px; }
.ar-dev { position: relative; margin: 0 auto; }
.ar-dev.tv { width: 100%; aspect-ratio: 16 / 9.7; padding: 2.2%; border-radius: 14px; background: #07070d; border: 2px solid #2b2b44; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.ar-dev.tab { width: 100%; aspect-ratio: 16 / 10.6; padding: 3%; border-radius: 26px; background: #111119; border: 2px solid #2d2d45; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.ar-dev.term { width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; background: #0b0b12; border: 1px solid #2b2b44; box-shadow: 0 24px 70px rgba(0,0,0,.55); padding: 0; overflow: hidden; }
.ar-dev.pc { width: 100%; aspect-ratio: 16 / 10; padding: 2%; border-radius: 12px; background: #101019; border: 2px solid #2b2b44; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.ar-scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; background: #121418; color: #e8eaed; font-family: Roboto, "Segoe UI", Arial, sans-serif; container-type: inline-size; }
.ar-dev.tab .ar-scr { border-radius: 12px; }
.ar-cap { margin-top: 1rem; min-height: 3.2em; display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; font-weight: 500; color: var(--text-primary); }
.ar-cap .b { flex-shrink: 0; padding: .15rem .55rem; border-radius: 8px; background: var(--primary); font-size: .78rem; font-weight: 800; margin-top: .15rem; }
.ar-ctrl { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.ar-ctrl button { appearance: none; cursor: pointer; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.ar-ctrl button:hover { border-color: var(--ar-line); background: var(--ar-soft); }
.ar-ctrl button svg { width: 16px; height: 16px; }
.ar-prog { flex: 1; display: flex; gap: 4px; }
.ar-prog i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; cursor: pointer; }
.ar-prog i b { display: block; height: 100%; width: 0; background: var(--primary-light); }
.ar-prog i.done b { width: 100%; }

/* telas Android simuladas (tamanhos relativos à largura do aparelho) */
.sx { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 2.6cqw; animation: sxIn .35s ease; }
@keyframes sxIn { from { opacity: 0; transform: translateX(3%); } to { opacity: 1; transform: none; } }
.sx-top { display: flex; align-items: center; justify-content: space-between; padding: 2.6% 4% 1.5%; font-size: .85em; color: #9aa0a6; }
.sx-title { padding: 1% 4% 2.5%; font-size: 1.55em; font-weight: 500; color: #fff; }
.sx-crumb { padding: 0 4%; font-size: .8em; color: #8ab4f8; }
.sx-list { padding: 0 3%; display: flex; flex-direction: column; gap: 1.2%; }
.sx-it { display: flex; align-items: center; gap: 3%; padding: 1.9% 2.4%; border-radius: .6em; transition: background .25s, transform .25s, box-shadow .25s; }
.sx-it .i { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: #2a2f37; font-size: .9em; flex-shrink: 0; }
.sx-it .t { flex: 1; min-width: 0; }
.sx-it .t b { display: block; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-it .t s { display: block; text-decoration: none; font-size: .8em; color: #9aa0a6; }
.sx-it.f { background: #e8eaed; transform: scale(1.03); box-shadow: 0 .4em 1.2em rgba(0,0,0,.45); }
.sx-it.f .t b { color: #111; }
.sx-it.f .t s { color: #444; }
.sx-it.f .i { background: #c7c9cc; }
.sx-tg { width: 2.4em; height: 1.3em; border-radius: 1em; background: #5f6368; position: relative; flex-shrink: 0; transition: background .3s; }
.sx-tg::after { content: ""; position: absolute; top: .15em; left: .15em; width: 1em; height: 1em; border-radius: 50%; background: #e8eaed; transition: left .3s; }
.sx-tg.on { background: #8ab4f8; }
.sx-tg.on::after { left: 1.25em; background: #fff; }
.sx-sec { padding: 2.4% 5% .6%; font-size: .78em; color: #8ab4f8; font-weight: 500; }
.sx-dim { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; animation: sxIn .3s ease; }
.sx-dlg { width: 64%; background: #2d3036; border-radius: 1em; padding: 4% 4.5% 3%; box-shadow: 0 1em 3em rgba(0,0,0,.6); }
.sx-dlg h4 { margin: 0 0 3%; font-size: 1.15em; font-weight: 500; color: #fff; font-family: inherit; }
.sx-dlg p { margin: 0 0 4%; font-size: .85em; line-height: 1.45; color: #c4c7c5; }
.sx-btns { display: flex; justify-content: flex-end; gap: 4%; }
.sx-btns span { padding: 1.6% 4%; border-radius: 2em; color: #8ab4f8; font-weight: 500; font-size: .9em; transition: all .25s; }
.sx-btns span.f { background: #8ab4f8; color: #0b1d36; transform: scale(1.06); }
.sx-home { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, #1f3b73, #0a1530 70%); }
.sx-home .brand { position: absolute; left: 5%; top: 6%; font-weight: 800; letter-spacing: .12em; font-size: 1.3em; color: #fff; }
.sx-home .clock { position: absolute; right: 5%; top: 6%; font-size: 1.2em; color: #cfd8e3; }
.sx-apps { position: absolute; left: 6%; right: 6%; top: 32%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4%; }
.sx-app { text-align: center; font-size: .85em; color: #e6ecf5; transition: transform .25s; }
.sx-app .ico { width: 62%; aspect-ratio: 1; margin: 0 auto 8%; border-radius: 22%; display: grid; place-items: center; font-size: 1.6em; background: #233a66; box-shadow: 0 .3em 1em rgba(0,0,0,.35); }
.sx-app.f { transform: scale(1.14); }
.sx-app.f .ico { outline: .18em solid #fff; outline-offset: .15em; }
.sx-gtv { position: absolute; inset: 0; background: linear-gradient(180deg, #121417, #0b0c0e); }
.sx-gtv .bar { display: flex; align-items: center; gap: 3%; padding: 4% 4% 0; font-size: .9em; color: #c4c7c5; }
.sx-gtv .bar .pill { padding: .45em .9em; border-radius: 2em; }
.sx-gtv .bar .pill.on { background: #e8eaed; color: #111; }
.sx-gtv .bar .sp { flex: 1; }
.sx-gtv .bar .gear { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; transition: all .25s; }
.sx-gtv .bar .gear.f { background: #e8eaed; color: #111; transform: scale(1.15); }
.sx-gtv .hero { margin: 4% 4% 0; height: 38%; border-radius: .8em; background: linear-gradient(120deg, #3b1d6e, #1e3a8a); display: flex; align-items: flex-end; padding: 3%; font-size: 1.3em; font-weight: 600; }
.sx-gtv .row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2%; margin: 4% 4% 0; }
.sx-gtv .row i { aspect-ratio: 16/9; border-radius: .5em; background: #24272d; }
.sx-gtv .row i:first-child { background: linear-gradient(135deg, #7c3aed, #9333ea); }
.sx-player { position: absolute; inset: 0; background: #0b1730 url("../images/acesso-remoto/dev_clima.webp") center / cover no-repeat; }
.sx-toast { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); background: rgba(20,22,26,.92); color: #fff; padding: 1.2% 3%; border-radius: 2em; font-size: .85em; white-space: nowrap; display: flex; align-items: center; gap: .5em; animation: sxIn .4s ease; }
.sx-toast i { width: .7em; height: .7em; border-radius: 50%; background: #22c55e; }
.sx-light { background: #f8f9fb; color: #1f1f1f; }
.sx-light .sx-top { color: #5f6368; }
.sx-light .sx-title { color: #1f1f1f; }
.sx-light .sx-it .t b { color: #1f1f1f; }
.sx-light .sx-it .t s { color: #5f6368; }
.sx-light .sx-it .i { background: #e3e7ee; }
.sx-light .sx-sec { color: #0b57d0; }
.sx-light .sx-tg { background: #c4c7c5; }
.sx-light .sx-tg.on { background: #0b57d0; }
.sx-light .sx-dlg { background: #eef1f6; }
.sx-light .sx-dlg h4 { color: #1f1f1f; }
.sx-light .sx-dlg p { color: #444746; }
.sx-light .sx-btns span { color: #0b57d0; }
.sx-light .sx-btns span.f { background: #0b57d0; color: #fff; }
.sx-light .sx-it.hl { background: #dfe7fb; }
.sx-menu { position: absolute; right: 3%; top: 9%; width: 44%; background: #fff; border-radius: .7em; box-shadow: 0 .6em 2em rgba(0,0,0,.25); padding: 1.5% 0; animation: sxIn .3s ease; }
.sx-menu div { padding: 3% 6%; font-size: .9em; color: #1f1f1f; }
.sx-menu div.hl { background: #dfe7fb; }
.sx-appinfo { display: flex; align-items: center; gap: 3%; padding: 1% 5% 3%; }
.sx-appinfo .lg { width: 3.4em; height: 3.4em; border-radius: 22%; background: linear-gradient(135deg, #7c3aed, #9333ea); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1em; }
.sx-pin { display: flex; gap: 3%; justify-content: center; margin: 4% 0; }
.sx-pin i { width: 1em; height: 1em; border-radius: 50%; background: #0b57d0; }
.sx-share { margin: 0 0 4%; padding: 2.4% 3%; border-radius: .6em; border: 1px solid #c4c7c5; font-size: .9em; display: flex; justify-content: space-between; color: #1f1f1f; }
/* toque animado (tablet) */
.sx-tap { position: absolute; width: 7%; aspect-ratio: 1; margin: -3.5% 0 0 -3.5%; border-radius: 50%; background: rgba(147,51,234,.35); border: .25em solid rgba(168,85,247,.95); pointer-events: none; z-index: 9; animation: sxTap 1s ease forwards; }
@keyframes sxTap { 0% { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 55% { transform: scale(.82); } 100% { transform: scale(1.5); opacity: 0; } }
/* painel simulado (PC) */
.sx-pn { position: absolute; inset: 0; display: grid; grid-template-columns: 17% 1fr; background: #0f0f1a; color: #e5e7eb; font-family: Outfit, system-ui, sans-serif; }
.sx-pn .side { background: #14142a; padding: 6% 8%; display: flex; flex-direction: column; gap: 4%; font-size: .78em; color: #9ca3af; }
.sx-pn .side b { color: #fff; font-size: 1.15em; margin-bottom: 6%; }
.sx-pn .side span.on { color: #fff; background: rgba(147,51,234,.25); border-radius: .4em; padding: 3% 6%; margin: 0 -6%; }
.sx-pn .main { padding: 3% 3.5%; position: relative; }
.sx-pn .h { font-size: 1.15em; font-weight: 700; margin-bottom: 3%; }
.sx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.sx-card { background: #1a1a2e; border: 1px solid rgba(255,255,255,.06); border-radius: .6em; padding: 6%; font-size: .78em; }
.sx-card .th { aspect-ratio: 16/9; border-radius: .4em; margin-bottom: 7%; background: #0b1730 url("../images/acesso-remoto/dev_clima.webp") center / cover; }
.sx-card .st { display: flex; align-items: center; gap: .4em; color: #86efac; font-size: .9em; margin-top: 3%; }
.sx-card .st i { width: .55em; height: .55em; border-radius: 50%; background: #22c55e; }
.sx-card .info { float: right; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid #6b7280; display: grid; place-items: center; font-size: .85em; font-weight: 700; transition: all .25s; }
.sx-card .info.f { background: #9333ea; border-color: #9333ea; color: #fff; transform: scale(1.25); }
.sx-modal { position: absolute; inset: 6% 6%; background: #1a1a2e; border: 1px solid rgba(255,255,255,.1); border-radius: .8em; padding: 4%; box-shadow: 0 1em 3em rgba(0,0,0,.6); animation: sxIn .3s ease; font-size: .85em; display: flex; flex-direction: column; }
.sx-modal .mh { display: flex; align-items: center; gap: 3%; font-size: 1.3em; font-weight: 700; }
.sx-modal .mh .on { font-size: .55em; padding: .3em .7em; border-radius: 1em; background: rgba(34,197,94,.15); color: #86efac; font-weight: 600; }
.sx-modal .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; margin: 5% 0; }
.sx-modal .stats div { background: #22223a; border-radius: .5em; padding: 6% 8%; font-size: .85em; color: #9ca3af; }
.sx-modal .stats b { display: block; color: #fff; font-size: 1.25em; }
.sx-modal .ft { margin-top: auto; display: flex; justify-content: flex-end; gap: 3%; }
.sx-modal .ft span { padding: 2% 4%; border-radius: .5em; border: 1px solid #3f3f5a; font-weight: 600; transition: all .25s; }
.sx-modal .ft span.pri { background: #9333ea; border-color: #9333ea; }
.sx-modal .ft span.f { background: #7c3aed; border-color: #c4b5fd; transform: scale(1.08); box-shadow: 0 0 0 .3em rgba(168,85,247,.3); }
.sx-live { position: absolute; inset: 0; background: #0f0f1a; padding: 2.5%; display: grid; grid-template-columns: 1fr 26%; grid-template-rows: auto 1fr; gap: 2.5%; font-family: Outfit, system-ui, sans-serif; }
.sx-live .top { grid-column: 1 / -1; display: flex; gap: 1.5%; font-size: .75em; }
.sx-live .top span { padding: .35em .8em; border-radius: 2em; background: #1d1d33; color: #cbd5e1; }
.sx-live .top span.g { color: #86efac; background: rgba(34,197,94,.12); }
.sx-live .scr { position: relative; border-radius: .5em; overflow: hidden; background: #0b1730 url("../images/acesso-remoto/dev_clima.webp") center / cover; }
.sx-live .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; align-content: start; }
.sx-live .pad i { aspect-ratio: 1; border-radius: .4em; background: #22223a; display: grid; place-items: center; font-style: normal; font-size: .8em; color: #cbd5e1; }
.sx-live .pad i.ok { background: #7c3aed; color: #fff; }
.sx-live .pad i.x { visibility: hidden; }
.sx-live .pad i.w { grid-column: span 3; aspect-ratio: auto; padding: 8% 0; }
.sx-cursor { position: absolute; width: 4.5%; z-index: 10; pointer-events: none; transition: left .7s ease, top .7s ease; filter: drop-shadow(0 .15em .2em rgba(0,0,0,.6)); }
/* terminal */
.sx-term { position: absolute; inset: 0; padding: 4.5% 5%; font: 2.15cqw/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; color: #d4d4d8; background: #0b0b12; }
.sx-term .bar { position: absolute; left: 0; right: 0; top: 0; height: 7%; display: flex; align-items: center; gap: 1.2%; padding: 0 3%; background: #16161f; }
.sx-term .bar i { width: 1.1em; height: 1.1em; border-radius: 50%; background: #3f3f46; }
.sx-term .bar i:nth-child(1) { background: #ef4444; } .sx-term .bar i:nth-child(2) { background: #f59e0b; } .sx-term .bar i:nth-child(3) { background: #22c55e; }
.sx-term .body { margin-top: 6%; white-space: pre-wrap; word-break: break-all; }
.sx-term .p { color: #a78bfa; }
.sx-term .ok { color: #4ade80; }
.sx-term .cm { color: #71717a; }
.sx-term .caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -0.15em; background: #e4e4e7; animation: sxBlink 1s steps(1) infinite; }
@keyframes sxBlink { 50% { opacity: 0; } }

/* ---------- compatibilidade ---------- */
.ar-tbl-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: var(--bg-card); }
.ar-tbl { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .94rem; }
.ar-tbl th, .ar-tbl td { padding: .95rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.06); }
.ar-tbl thead th { background: rgba(147,51,234,.12); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #ddd6fe; }
.ar-tbl td { color: var(--text-secondary); }
.ar-tbl td:first-child { color: var(--text-primary); font-weight: 700; white-space: nowrap; }
.ar-tbl tr:last-child td { border-bottom: none; }
.ar-y, .ar-p, .ar-n { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; white-space: nowrap; }
.ar-y { color: #4ade80; } .ar-p { color: #fbbf24; } .ar-n { color: #a1a1aa; }
.ar-devs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.ar-devc { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); }
.ar-devc .top { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.ar-devc .top svg { width: 34px; height: 34px; color: var(--primary-light); flex-shrink: 0; }
.ar-devc h3 { font-size: 1.05rem; margin: 0; }
.ar-devc .st { font-size: .78rem; font-weight: 700; }
.ar-devc p { margin: 0; color: var(--text-secondary); font-size: .9rem; }
.ar-devc.no { opacity: .8; border-style: dashed; }
.ar-tested { margin-top: 2rem; padding: 1.4rem 1.6rem; border-radius: 16px; background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.22); }
.ar-tested h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.ar-tested ul { margin: 0; padding-left: 1.1rem; color: var(--text-secondary); }

/* ---------- antes x depois ---------- */
.ar-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ar-vs > div { padding: 2rem; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.08); background: var(--bg-card); }
.ar-vs h3 { margin: 0 0 1rem; font-size: 1.2rem; }
.ar-vs ul { list-style: none; margin: 0; padding: 0; }
.ar-vs li { position: relative; padding-left: 1.7rem; margin: .7rem 0; color: var(--text-secondary); }
.ar-vs .old li::before { content: "–"; position: absolute; left: .35rem; color: #71717a; font-weight: 800; }
.ar-vs .new { border-color: rgba(168,85,247,.45); background: linear-gradient(160deg, rgba(147,51,234,.14), var(--bg-card) 60%); }
.ar-vs .new li::before { content: "✓"; position: absolute; left: .2rem; color: #4ade80; font-weight: 800; }

/* ---------- usos ---------- */
.ar-uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ar-use { padding: 1.35rem; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.ar-use .e { font-size: 1.6rem; line-height: 1; }
.ar-use h3 { font-size: 1rem; margin: .7rem 0 .35rem; }
.ar-use p { margin: 0; font-size: .88rem; color: var(--text-secondary); }

/* ---------- segurança ---------- */
.ar-sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ar-lock { padding: 1.5rem; border-radius: 16px; background: var(--bg-card); border: 1px solid rgba(255,255,255,.06); }
.ar-lock h3 { font-size: 1.02rem; margin: 0 0 .4rem; display: flex; align-items: center; gap: .55rem; }
.ar-lock h3 svg { width: 20px; height: 20px; color: #4ade80; flex-shrink: 0; }
.ar-lock p { margin: 0; color: var(--text-secondary); font-size: .9rem; }

/* ---------- FAQ ---------- */
.ar-faq { max-width: 860px; margin: 0 auto; }
.ar-faq details { border: 1px solid rgba(255,255,255,.08); background: var(--bg-card); border-radius: 14px; margin-bottom: .75rem; overflow: hidden; }
.ar-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.3rem; font-weight: 600; position: relative; }
.ar-faq summary::-webkit-details-marker { display: none; }
.ar-faq summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--primary-light); transition: transform .25s; }
.ar-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ar-faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--text-secondary); }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .ar-hero-grid, .ar-shot, .ar-pane.is-on { grid-template-columns: 1fr; }
  .ar-scene { max-width: 640px; margin: 0 auto; width: 100%; }
  .ar-feats, .ar-sec-grid, .ar-devs { grid-template-columns: repeat(2, 1fr); }
  .ar-uses, .ar-req, .ar-band-grid { grid-template-columns: repeat(2, 1fr); }
  .ar-sim { position: static; }
  .ar-pane.is-on .ar-sim { order: -1; }
}
@media (max-width: 760px) {
  .ar-sec { padding: 4rem 0; }
  .ar-hero { padding: 7.5rem 0 3rem; }
  .ar-journey, .ar-steps, .ar-vs, .ar-feats, .ar-sec-grid, .ar-devs { grid-template-columns: 1fr; }
  .ar-tab { padding: .65rem .85rem; font-size: .88rem; }
  .ar-tab small { display: none; }
  .ar-chip.c1 { left: 40%; top: -8%; }
  .ar-chip.c2 { right: 0; bottom: -6%; }
}
@media (max-width: 480px) {
  .ar-uses, .ar-req, .ar-band-grid { grid-template-columns: 1fr; }
  .ar-chip { font-size: .68rem; padding: .4rem .6rem; }
  .ar-chip .ic { width: 22px; height: 22px; }
  .ar-chip small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ar *, .ar *::before, .ar *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}