/* Posicionamento do ecossistema VSHub. Mockups de interface são HTML acessível. */
.camera-showcase { overflow:hidden; border:1px solid #d5dfe9; border-radius:7px; background:#edf3f9; box-shadow:0 18px 45px #273d560e; }
.camera-showcase-top { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 16px; background:#fff; border-bottom:1px solid #e2e9f0; }
.camera-showcase-top>span { font-size:7px; letter-spacing:1px; color:#758a9e; }
.camera-showcase-top>div { display:flex; gap:5px; }
.camera-showcase-top button { border:1px solid #d6e1ec; border-radius:4px; background:#fff; padding:7px 12px; color:#718296; font-size:9px; }
.camera-showcase-top button[aria-pressed=true] { color:#315f91; background:#e5eef8; border-color:#b1c7df; }
.camera-showcase>a { display:block; }
.camera-showcase img { width:100%; height:auto; }
@media(max-width:760px) { .camera-showcase-top { padding:11px; flex-wrap:wrap; gap:10px; } .camera-showcase-top>span { font-size:6px; } .camera-showcase-top button { font-size:10px; padding:8px 12px; } }
.ecosystem-site .hero-layout { grid-template-columns:1fr 1.4fr; min-height:690px; gap:34px; }
.ecosystem-site h1 { font-size:clamp(51px,4.6vw,69px); letter-spacing:-3.2px; line-height:1.07; }
.ecosystem-site .hero-description { max-width:390px; }
.ecosystem-site .hero-visual { margin-right:-80px; }
.ecosystem-site .hero-copy { padding-bottom:50px; }
.ecosystem-topline { display:block; font-size:8px; letter-spacing:1.7px; color:#6c8196; margin-bottom:21px; }
.ecosystem-art { border-radius:5px; overflow:hidden; box-shadow:0 22px 65px #334f6e19; }
.ecosystem-art img { width:100%; aspect-ratio:1.5; object-fit:cover; }
.ecosystem-art-note { font-size:7px; color:#73879b; letter-spacing:1.3px; text-align:right; margin:17px 0 0; }
.device-stage { position:relative; aspect-ratio:1.5; isolation:isolate; background:radial-gradient(ellipse at 35% 5%,#f8fbff 0%,#e4edf6 56%,#d4e1ef 100%); border-radius:5px; overflow:hidden; box-shadow:0 22px 65px #334f6e19; }
.device-stage>img { position:absolute; object-fit:contain; filter:drop-shadow(0 12px 10px #263c5420); }
.stage-headset { left:-5%; top:8%; width:64%; height:85%; z-index:3; }
.stage-camera { right:-1%; bottom:3%; width:53%; height:57%; z-index:4; }
.stage-video { right:1%; top:6%; width:66%; height:35%; z-index:2; }
.stage-platform { position:absolute; background:linear-gradient(160deg,#d3e0ed,#b7c9dc); border-top:1px solid #f4f8fc; box-shadow:0 20px 28px #263c5418; }
.stage-platform-headset { left:4%; bottom:4%; width:46%; height:11%; z-index:0; }
.stage-platform-camera { right:2%; bottom:6%; width:40%; height:10%; z-index:1; }
.stage-platform-bar { right:0; top:34%; width:60%; height:12%; z-index:0; }
.ecosystem-hero .hub-float { bottom:-29px; }
.ecosystem-hero { padding-bottom:30px; }
.ecosystem-site .concept-manage-grid strong { margin-bottom:3px; }
.ecosystem-site .roadmap-grid p { min-height:0; margin-bottom:0; }
.ecosystem-site .category-art { overflow:hidden; }
.ecosystem-site .headset-category .category-art>img { height:190px; }
.ecosystem-site .webcam-art>img { height:230px; }
.ecosystem-site .category-content>.text-link { margin-top:auto; }
.ecosystem-site .category-art>img,
.ecosystem-site .headset-category .category-art>img,
.ecosystem-site .webcam-art>img { position:absolute; inset:0; width:100%; height:100%; padding:15px; object-fit:contain; }
.hub-float { position:absolute; left:-35px; bottom:5px; display:flex; align-items:center; gap:15px; background:#fff; border:1px solid #dce7f2; border-radius:6px; padding:19px 25px 19px 17px; box-shadow:0 14px 35px #273d561c; }
.hub-float-icon { background:#edf3f9; color:var(--blue); display:grid; place-items:center; width:47px; height:47px; border-radius:9px; }
.hub-float-icon .icon { width:23px; height:23px; }
.hub-float>div { display:grid; }
.hub-float small { font-size:6px; letter-spacing:1.4px; color:#8594a2; font-weight:600; }
.hub-float strong { font-size:17px; letter-spacing:-.5px; font-weight:550; margin:3px 0; }
.hub-float>div>span { font-size:8px; color:#84909c; display:flex; align-items:center; gap:8px; }
.hub-float i { display:inline-block; width:3px; height:3px; border-radius:50%; background:#759ac2; }
.ecosystem-site .experience-layout { grid-template-columns:.9fr 1.8fr; gap:45px; }
.concept-app { border:1px solid #d5dfe9; border-radius:7px; background:#f7f9fb; box-shadow:0 18px 45px #273d560e; overflow:hidden; }
.concept-top { padding:0 14px; display:flex; justify-content:space-between; align-items:center; height:33px; background:#fff; border-bottom:1px solid #e7ecf1; font-size:8px; color:#8190a0; }
.concept-top>span:nth-child(2) { margin-left:35px; font-weight:600; color:#586d82; }
.concept-edition { font-size:6px; letter-spacing:.9px; }
.concept-body { display:flex; min-height:300px; }
.concept-sidebar { width:128px; flex:none; background:#24374b; color:#b6c5d4; padding:22px 11px; display:flex; flex-direction:column; position:relative; }
.concept-logo { font-size:21px; letter-spacing:-1px; font-weight:650; color:#fff; margin:0 9px 30px; line-height:1; }
.concept-logo>span { color:#9cbbdd; font-weight:350; }
.concept-sidebar>div { display:flex; align-items:center; gap:8px; font-size:8px; padding:10px 8px; margin:2px 0; border-radius:4px; }
.concept-sidebar .icon { width:13px; height:13px; }
.concept-side-active { background:#ffffff16; color:#fff; }
.concept-side-footer { font-size:6px; letter-spacing:1.4px; color:#8499af; margin:auto 9px 0; padding-top:30px; }
.concept-main { flex:1; min-width:0; padding:26px 23px 22px; }
.concept-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:24px; }
.concept-eyebrow { font-size:6px; letter-spacing:1.3px; color:#8392a0; font-weight:550; }
.concept-heading h3 { font-size:17px; letter-spacing:-.55px; font-weight:550; margin:5px 0 0; line-height:1.3; }
.concept-user { display:grid; place-items:center; width:26px; height:26px; background:#e5eef7; color:#6385aa; border-radius:50%; font-size:8px; flex:none; }
.concept-device-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.concept-device-grid article { background:white; border:1px solid #e0e7ee; border-radius:5px; padding:16px 11px 13px; min-height:139px; }
.concept-device-icon { background:#f0f5fa; border-radius:8px; display:grid; place-items:center; width:39px; height:39px; margin-bottom:14px; color:#638cb6; }
.concept-device-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.concept-device-grid small { display:block; font-size:5px; letter-spacing:.8px; color:#8996a3; }
.concept-device-grid strong { display:block; font-size:8px; letter-spacing:-.1px; margin:5px 0; font-weight:550; }
.concept-device-grid article>span { font-size:6px; display:block; color:#8391a0; }
.concept-bottom { display:flex; gap:10px; align-items:center; background:#eaf1f8; border-radius:5px; padding:12px; margin-top:15px; }
.concept-bottom>.icon { width:17px; height:17px; color:#668db7; }
.concept-bottom strong { display:block; font-size:8px; font-weight:550; }
.concept-bottom>div>span { display:block; font-size:6px; color:#8493a2; margin-top:3px; }
.concept-pill { display:inline-flex; width:fit-content; font-size:5px; letter-spacing:.7px; color:#6886a5; border:1px solid #c7d7e7; background:#edf3f9; border-radius:3px; padding:4px 6px; white-space:nowrap; }
.concept-bottom>.concept-pill { margin-left:auto; }
.ecosystem-site .feature-panel>p { font-size:9px; line-height:1.8; }
.concept-settings { padding:15px 17px; border:1px solid #e0e7ee; border-radius:5px; background:#fff; }
.concept-setting-lead { display:flex; align-items:center; gap:11px; margin-bottom:20px; }
.concept-setting-lead>svg { width:32px; height:32px; fill:none; stroke:var(--blue); stroke-width:1.3; padding:6px; background:var(--pale); border-radius:6px; }
.concept-setting-lead strong { display:block; font-size:10px; font-weight:550; }
.concept-setting-lead span { font-size:7px; color:#8492a0; }
.concept-setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:8px; color:#6e7d8c; margin:17px 0; }
.concept-track { display:block; height:4px; width:42%; background:#e6edf4; border-radius:10px; overflow:hidden; }
.concept-track>i { display:block; height:100%; background:#80a5ce; }
.concept-settings-note { font-size:6px; color:#8a98a6; display:block; margin-top:20px; }
.concept-manage-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.concept-manage-grid>article { background:white; border:1px solid #e0e7ee; border-radius:5px; padding:20px; }
.concept-manage-grid .icon { color:var(--blue); width:26px; height:26px; margin-bottom:14px; }
.concept-manage-grid small { display:block; font-size:6px; letter-spacing:1px; color:#8594a2; }
.concept-manage-grid strong { display:block; font-size:13px; font-weight:500; line-height:1.5; margin:9px 0 18px; letter-spacing:-.3px; }
.roadmap-section { background:#f2f6fa; padding-block:85px; }
.roadmap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; }
.roadmap-grid>article { position:relative; border-top:1px solid #c1d2e4; padding-top:22px; }
.roadmap-number { display:block; font-size:8px; letter-spacing:1.1px; color:#6e88a3; }
.roadmap-grid>article>.icon { color:#6b92bc; width:30px; height:30px; margin:30px 0 23px; stroke-width:1.2; }
.roadmap-grid h3 { font-size:29px; line-height:1.2; font-weight:500; letter-spacing:-1px; margin-bottom:19px; }
.roadmap-grid p { font-size:12px; color:var(--muted); line-height:1.9; max-width:310px; min-height:70px; }
.roadmap-status { display:inline-block; font-size:7px; font-weight:600; letter-spacing:1px; color:#4c7198; background:#e5edf6; border:1px solid #cad9e9; padding:6px 9px; border-radius:3px; margin-top:8px; }
.roadmap-grid small { display:block; font-size:9px; line-height:1.8; color:#7d8c9a; max-width:300px; margin-top:13px; }
.roadmap-note { display:flex; align-items:flex-start; gap:9px; border-top:1px solid #dce5ef; padding-top:19px; margin:34px 0 0; font-size:9px; line-height:1.9; color:#7d8c9a; }
.roadmap-note .icon { width:13px; height:13px; margin-top:2px; }
.ecosystem-categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px; }
.category-card { display:flex; flex-direction:column; border:1px solid #dfe7ef; border-radius:5px; overflow:hidden; }
.category-art { height:190px; background:#e8eff7; position:relative; display:grid; place-items:center; padding:25px; }
.headset-category .category-art { background:#f0f3f6; }
.meeting-category .category-art { background:#e5eef7; }
.category-art>svg { width:96px; height:96px; fill:none; stroke:#5f80a3; stroke-width:.65; stroke-linecap:round; stroke-linejoin:round; }
.meeting-category .category-art>svg { width:117px; height:117px; }
.category-art>span { position:absolute; top:17px; left:22px; font-size:7px; letter-spacing:1.3px; color:#7b8e9f; }
.category-art>img { width:100%; height:150px; object-fit:contain; mix-blend-mode:multiply; }
.category-content { display:flex; flex-direction:column; flex:1; padding:25px; }
.category-label { font-size:7px; font-weight:650; letter-spacing:1.5px; color:#7f8f9e; }
.category-content h3 { font-size:22px; line-height:1.25; font-weight:500; letter-spacing:-.7px; margin:13px 0; }
.category-content p { font-size:11px; line-height:1.85; color:var(--muted); margin:0 0 20px; }
.category-content p strong { font-weight:550; color:#50667d; }
.category-status { display:block; width:fit-content; font-size:6px; letter-spacing:.8px; padding:5px 7px; border:1px solid #d6e1ec; background:#f1f5f9; border-radius:3px; color:#70869c; margin:auto 0 22px; }
.category-status.available { color:#4b7399; background:#e9f1f9; border-color:#c3d7ea; }
.category-content>.text-link { font-size:10px; gap:12px; justify-content:space-between; border-top:1px solid #e2e9f0; padding-top:15px; }
.category-content>.text-link>span { font-size:20px; }
@media(min-width:1600px) {
  .ecosystem-site .hero-layout { min-height:735px; }
  .ecosystem-site h1 { font-size:69px; }
}
@media(max-width:1200px) {
  .ecosystem-site .hero-layout { gap:25px; min-height:630px; grid-template-columns:1fr 1.2fr; }
  .ecosystem-site h1 { font-size:57px; }
  .ecosystem-site .hero-visual { margin-right:-40px; }
  .ecosystem-site .hero-description { font-size:13px; max-width:350px; }
  .hub-float { left:-20px; padding:14px; gap:11px; }
  .hub-float strong { font-size:15px; }
  .hub-float-icon { width:38px; height:38px; }
  .ecosystem-site .experience-layout { grid-template-columns:.85fr 1.65fr; gap:30px; }
  .concept-sidebar { width:105px; padding-inline:8px; }
  .concept-main { padding:23px 16px 18px; }
  .concept-heading h3 { font-size:15px; }
  .concept-device-grid { gap:7px; }
  .concept-device-grid article { padding:14px 8px 11px; }
  .concept-device-grid strong { font-size:7px; }
  .concept-device-grid article>span { font-size:5px; }
  .concept-bottom { padding:10px; }
  .concept-bottom>.concept-pill { display:none; }
  .roadmap-grid { gap:27px; }
  .category-content { padding:21px; }
  .category-content h3 { font-size:20px; }
  .category-content p { font-size:10px; }
  .category-content>.text-link { font-size:9px; }
}
@media(max-width:980px) {
  .ecosystem-site .hero-layout { grid-template-columns:1fr 1.1fr; min-height:580px; gap:20px; }
  .ecosystem-site h1 { font-size:49px; letter-spacing:-2.7px; }
  .ecosystem-site .hero-description { font-size:12px; }
  .ecosystem-site .hero-visual { margin-right:-28px; }
  .ecosystem-topline { font-size:6px; letter-spacing:1px; }
  .hub-float { bottom:-15px; left:-8px; padding:12px; gap:9px; }
  .hub-float strong { font-size:13px; }
  .hub-float small { font-size:5px; }
  .hub-float>div>span { font-size:6px; }
  .hub-float-icon { width:32px; height:32px; }
  .hub-float-icon .icon { width:19px; height:19px; }
  .ecosystem-art-note { margin-top:37px; font-size:5px; }
  .ecosystem-site .experience-layout { grid-template-columns:.8fr 1.5fr; gap:24px; }
  .concept-sidebar { width:81px; padding:20px 6px; }
  .concept-logo { margin-inline:6px; font-size:18px; }
  .concept-sidebar>div { padding:9px 5px; gap:5px; font-size:6px; }
  .concept-sidebar .icon { width:11px; height:11px; }
  .concept-side-footer { font-size:5px; margin-left:6px; }
  .concept-main { padding:18px 12px; }
  .concept-heading h3 { font-size:13px; }
  .concept-eyebrow { font-size:5px; }
  .concept-user { width:22px; height:22px; font-size:6px; }
  .concept-device-grid article { padding:12px 7px; min-height:135px; }
  .concept-device-grid strong { font-size:6px; }
  .concept-device-grid small { font-size:4px; letter-spacing:.5px; }
  .concept-device-icon { width:31px; height:31px; }
  .concept-device-icon svg { width:21px; height:21px; }
  .concept-bottom { padding:10px 8px; gap:6px; }
  .concept-bottom strong { font-size:6px; }
  .concept-bottom>div>span { font-size:5px; }
  .concept-setting-row { font-size:7px; gap:12px; }
  .concept-settings { padding:13px; }
  .concept-setting-lead strong { font-size:8px; }
  .concept-setting-lead span { font-size:6px; }
  .concept-manage-grid { gap:8px; }
  .concept-manage-grid>article { padding:14px; }
  .concept-manage-grid strong { font-size:10px; }
  .roadmap-section { padding-block:70px; }
  .roadmap-grid { gap:23px; }
  .roadmap-grid h3 { font-size:25px; }
  .roadmap-grid p { font-size:11px; min-height:103px; }
  .roadmap-grid small { font-size:8px; }
  .ecosystem-categories { gap:15px; }
  .category-content { padding:17px; }
  .category-content h3 { font-size:18px; }
  .category-content>.text-link { font-size:8px; gap:8px; }
  .category-status { font-size:5px; letter-spacing:.5px; }
  .category-art { height:165px; }
}
@media(max-width:760px) {
  .ecosystem-site .hero-layout { display:flex; min-height:0; gap:0; padding-top:38px; padding-bottom:55px; }
  .ecosystem-site h1 { font-size:57px; line-height:1.05; letter-spacing:-3px; max-width:500px; }
  .ecosystem-site .hero-description { font-size:13px; max-width:420px; }
  .ecosystem-site .hero-copy { padding-bottom:0; }
  .ecosystem-site .hero-visual { margin:38px 0 0; }
  .ecosystem-topline { font-size:6px; margin-bottom:13px; letter-spacing:1px; }
  .ecosystem-art { margin-inline:-8px; width:calc(100% + 16px); }
  .hub-float { left:3px; bottom:9px; padding:12px; gap:9px; }
  .hub-float strong { font-size:13px; }
  .hub-float small { font-size:5px; letter-spacing:1px; }
  .hub-float>div>span { font-size:6px; }
  .hub-float-icon { width:34px; height:34px; }
  .ecosystem-art-note { margin-top:60px; font-size:6px; letter-spacing:.8px; }
  .ecosystem-site .experience-layout { display:flex; gap:24px; }
  .concept-app { margin-inline:-6px; }
  .concept-top { padding-inline:10px; height:30px; }
  .concept-top>span:nth-child(2) { margin-left:24px; }
  .concept-edition { font-size:5px; }
  .concept-body { min-height:270px; }
  .concept-sidebar { display:none; }
  .concept-logo { font-size:16px; margin:0 5px 23px; }
  .concept-sidebar>div { font-size:5px; gap:4px; padding:9px 4px; }
  .concept-sidebar .icon { width:9px; height:9px; }
  .concept-side-footer { font-size:4px; letter-spacing:.8px; margin-left:5px; }
  .concept-main { padding:22px 18px; }
  .concept-heading { gap:10px; margin-bottom:17px; }
  .concept-heading h3 { font-size:19px; line-height:1.4; max-width:240px; }
  .concept-eyebrow { font-size:6px; letter-spacing:1px; }
  .concept-user { width:26px; height:26px; font-size:7px; }
  .concept-device-grid { grid-template-columns:1fr; gap:9px; }
  .concept-device-grid article { padding:13px 13px 13px 66px; min-height:78px; position:relative; }
  .concept-device-icon { width:36px; height:36px; margin:0; position:absolute; left:14px; top:18px; }
  .concept-device-icon svg { width:24px; height:24px; }
  .concept-device-grid small { font-size:6px; letter-spacing:.7px; }
  .concept-device-grid strong { font-size:11px; line-height:1.5; margin:4px 0 2px; }
  .concept-device-grid article>span { font-size:8px; line-height:1.6; }
  .concept-bottom { padding:10px 8px; margin-top:12px; gap:7px; }
  .concept-bottom>.icon { width:13px; height:13px; }
  .concept-bottom strong { font-size:8px; }
  .concept-bottom>div>span { font-size:7px; }
  .ecosystem-site .feature-panel>p { font-size:8px; margin-top:12px; }
  .concept-settings { padding:12px; }
  .concept-setting-lead { gap:7px; margin-bottom:15px; }
  .concept-setting-lead>svg { width:27px; height:27px; }
  .concept-setting-lead strong { font-size:10px; }
  .concept-setting-lead span { font-size:7px; }
  .concept-setting-row { font-size:9px; margin:20px 0; }
  .concept-settings-note { font-size:7px; }
  .concept-manage-grid { gap:7px; }
  .concept-manage-grid>article { padding:12px 9px; }
  .concept-manage-grid .icon { width:21px; height:21px; }
  .concept-manage-grid strong { font-size:14px; }
  .concept-manage-grid small { font-size:7px; }
  .concept-pill { font-size:6px; padding:5px; }
  .roadmap-section { padding-block:58px; }
  .roadmap-grid { grid-template-columns:1fr; gap:32px; }
  .roadmap-grid>article { padding-top:18px; }
  .roadmap-grid>article>.icon { position:absolute; right:3px; top:13px; margin:0; width:25px; height:25px; }
  .roadmap-number { font-size:7px; }
  .roadmap-grid h3 { font-size:29px; margin:26px 0 16px; }
  .roadmap-grid p { min-height:0; font-size:12px; max-width:390px; margin-bottom:16px; }
  .roadmap-status { font-size:6px; margin-top:0; }
  .roadmap-grid small { font-size:9px; max-width:350px; margin-top:11px; }
  .roadmap-note { font-size:8px; margin-top:28px; padding-top:17px; }
  .ecosystem-categories { grid-template-columns:1fr; gap:21px; }
  .category-art { height:190px; }
  .category-content { padding:24px; }
  .category-label { font-size:7px; }
  .category-content h3 { font-size:24px; }
  .category-content p { font-size:12px; max-width:390px; }
  .category-status { font-size:6px; letter-spacing:.8px; margin:0 0 23px; }
  .category-content>.text-link { font-size:11px; }
}
@media(max-width:360px) {
  .ecosystem-site h1 { font-size:50px; }
  .concept-sidebar { display:none; }
  .concept-main { padding:20px 13px; }
  .concept-heading h3 { font-size:17px; max-width:210px; }
  .concept-manage-grid strong { font-size:12px; }
}