@font-face {
  font-family: 'Kumbh Sans';
  src: url('assets/fonts/KumbhSans-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Kumbh Sans';
  src: url('assets/fonts/KumbhSans-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Kumbh Sans';
  src: url('assets/fonts/KumbhSans-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --navy: #182755;
  --navy-deep: #101a3d;
  --blue: #347bff;
  --blue-dark: #4862e0;
  --blue-pale: #eaf1ff;
  --ink-soft: #63708d;
  --muted: #8c97ae;
  --line: #e6eaf2;
  --surface: #ffffff;
  --surface-soft: #f7f9ff;
  --green: #3cbe7d;
  --orange: #ff9d41;
  --red: #ee6864;
  --shadow: 0 24px 70px rgba(28, 53, 119, .13);
  --radius-lg: 28px;
  --radius-md: 18px;
  --max-width: 1160px;
}

/* Páginas de download: navegação lateral e conteúdo interativo */
.workspace-page { padding: 64px 0 100px; background: linear-gradient(180deg,#f7f9ff 0,white 340px); }
.workspace-heading { padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.workspace-heading h1 { max-width: 850px; margin: 0; font-size: clamp(2.3rem,4.8vw,4rem); line-height: 1.08; letter-spacing: -.055em; }
.workspace-heading > p:last-child { margin: 18px 0 0; color: var(--ink-soft); font-size: 1.1rem; }
.workspace-layout { display: grid; grid-template-columns: 225px minmax(0,1fr); gap: 56px; margin-top: 38px; align-items: start; }
.workspace-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 6px; }
.aside-caption { display: block; color: var(--ink-soft); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.workspace-aside > .aside-caption { margin-bottom: 16px; }
.workspace-aside > a,.platform-picker > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--navy); text-align: left; font-size: 1rem; cursor: pointer; }
.workspace-aside > a:hover,.platform-picker > button:hover { background: #f4f7fe; }
.workspace-aside > p { color: var(--ink-soft); font-size: .85rem; margin: 24px 14px; line-height: 1.65; }
.platform-picker small { display: block; margin-top: 4px; font-size: .85rem; color: var(--ink-soft); }
.platform-picker > button[aria-pressed="true"] { background: var(--blue-pale); color: var(--blue); box-shadow: inset 3px 0 var(--blue); }
.platform-picker > button > span:first-child { display: grid; grid-template-columns: 23px 1fr; align-items: center; column-gap: 9px; }
.platform-picker .aside-platform-icon { grid-row: 1 / span 2; width: 21px; height: 21px; object-fit: contain; }
.workspace-body { min-width: 0; }
.workspace-body section { scroll-margin-top: 110px; }
.workspace-body h2 { font-size: clamp(1.5rem,2.5vw,2rem); letter-spacing: -.04em; line-height: 1.2; margin: 0 0 20px; }
.workspace-section { margin-top: 62px; }
.platform-detail { padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 14px 40px #18275505; }
.platform-detail-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 34px; flex-wrap: wrap; }
.availability-dot { color: var(--ink-soft); font-size: .85rem; display: inline-flex; gap: 7px; align-items: center; }
.availability-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #98a6bf; }
.platform-detail h2 { font-size: clamp(1.8rem,3.2vw,2.6rem); margin-bottom: 16px; }
.platform-detail-title { display: flex; align-items: center; gap: 13px; }
.detail-platform-icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; flex: 0 0 46px; border: 1px solid var(--line); border-radius: 13px; background: #f7f9ff; }
.detail-platform-icon img { width: 29px; height: 29px; object-fit: contain; }
.platform-lead { color: var(--ink-soft); font-size: 1rem; max-width: 620px; }
.download-action { display: flex; align-items: center; gap: 20px; margin: 28px 0; flex-wrap: wrap; }
.download-action button { padding: 14px 22px; border: 0; border-radius: 11px; font-size: 1rem; background: #eaf0fc; color: #586b90; }
.download-action > span { color: var(--ink-soft); font-size: .85rem; }
.download-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding: 23px 0; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.download-facts dt { font-size: .8rem; color: var(--ink-soft); margin-bottom: 8px; }
.download-facts dd { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.install-guide h3 { margin: 25px 0 18px; font-size: 1.05rem; }
.install-guide ol { padding: 0; margin: 0; list-style: none; counter-reset: install; }
.install-guide li { display: flex; align-items: baseline; gap: 12px; color: var(--ink-soft); font-size: .95rem; margin-top: 13px; counter-increment: install; }
.install-guide li::before { content: counter(install,decimal-leading-zero); color: var(--blue); font-size: .8rem; }
.section-inline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-inline > span { color: var(--ink-soft); font-size: .85rem; }
.download-help { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding: 25px 28px; background: #f2f6ff; border-radius: 16px; }
.download-help h3 { margin: 0; font-size: 1.3rem; }
.download-help .eyebrow { margin-bottom: 9px; }
.download-help p { color: var(--ink-soft); margin-bottom: 0; font-size: .95rem; }
.download-help > span { color: var(--blue); font-size: 1.6rem; }
.workspace-page button:focus-visible,.workspace-page a:focus-visible,.workspace-page summary:focus-visible { outline: 3px solid #347bff80; outline-offset: 4px; }
@media(max-width: 900px) {
  .workspace-layout { grid-template-columns: 180px minmax(0,1fr); gap: 24px; }
  .platform-detail { padding: 24px; }
}
@media(max-width: 680px) {
  .workspace-page { padding-top: 36px; }
  .workspace-layout { grid-template-columns: 1fr; gap: 24px; }
  .workspace-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .workspace-aside > .aside-caption { width: 100%; margin-bottom: 3px; }
  .workspace-aside > p { width: 100%; margin: 8px 0; }
  .workspace-aside > a { padding: 10px; }
  .platform-picker > button { flex: 1; padding: 12px 8px; }
  .platform-picker > button > span:last-child { display: none; }
  .platform-picker small { font-size: .8rem; }
  .download-facts { grid-template-columns: 1fr; gap: 16px; }
  .download-facts > div { display: flex; justify-content: space-between; gap: 20px; }
  .download-facts dd { text-align: right; }
  .platform-detail { padding: 22px 18px; }
  .workspace-section { margin-top: 40px; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--navy);
  background: var(--surface);
  font-family: 'Kumbh Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::selection { background: #cfe0ff; color: var(--navy); }

a { color: inherit; text-decoration: none; }

button, a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

.container { width: min(calc(100% - 48px), var(--max-width)); margin: 0 auto; }

.section-pad { padding: 112px 0; }

.section-light { background: var(--surface-soft); }

.section-navy { background: var(--navy-deep); color: #fff; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .84);
  border-bottom: 1px solid rgba(230, 234, 242, 0);
  backdrop-filter: blur(18px);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.site-header.scrolled { border-color: var(--line); box-shadow: 0 8px 28px rgba(24, 39, 85, .06); }

.nav-shell { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.04em; }

.brand img { display: block; object-fit: contain; }

.main-nav { display: flex; align-items: center; gap: 34px; color: var(--ink-soft); font-size: 14px; font-weight: 500; }

.main-nav > a:not(.nav-cta) { transition: color .2s ease; }

.main-nav > a:not(.nav-cta):hover { color: var(--blue); }

.nav-cta { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; color: #fff; background: var(--navy); border-radius: 999px; transition: transform .2s ease, background .2s ease; }

.nav-cta:hover { background: var(--blue); transform: translateY(-2px); }

.menu-toggle { display: none; border: 0; padding: 8px; background: transparent; cursor: pointer; }

.menu-toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; margin: 4px 0; border-radius: 10px; background: var(--navy); }

.hero { position: relative; overflow: hidden; padding-top: 78px; padding-bottom: 92px; background: linear-gradient(145deg, #f9fbff 0%, #fff 62%); }

.hero::before { position: absolute; top: 100px; left: -180px; width: 450px; height: 450px; border-radius: 50%; background: #edf3ff; content: ''; filter: blur(2px); opacity: .8; }

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .96fr) minmax(460px, 1.04fr); align-items: center; gap: 70px; }

.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }

.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px #e3edff; }

.hero h1 { max-width: 580px; margin: 0; color: var(--navy); font-size: clamp(3.25rem, 6vw, 5.25rem); font-weight: 700; letter-spacing: -.075em; line-height: .99; }

.hero h1 em { color: var(--blue-dark); font-style: normal; }

.hero-lead { max-width: 490px; margin: 28px 0 0; color: var(--ink-soft); font-size: 18px; line-height: 1.65; }

.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.button { display: inline-flex; min-height: 51px; align-items: center; justify-content: center; gap: 14px; padding: 0 21px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }

.button:hover { transform: translateY(-2px); }

.button-primary { color: #fff; background: var(--blue); box-shadow: 0 11px 24px rgba(52, 123, 255, .22); }

.button-primary:hover { background: #2469e9; box-shadow: 0 14px 28px rgba(52, 123, 255, .28); }

.button-quiet { color: var(--navy); border-color: var(--line); background: rgba(255, 255, 255, .72); }

.button-quiet:hover { border-color: #c8d5f0; background: #fff; }

.button-white { color: var(--navy); background: #fff; }

.button-white:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, .12); }

.hero-notes { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 27px; color: var(--ink-soft); font-size: 13px; }

.check-mark { display: inline-flex; width: 19px; height: 19px; align-items: center; justify-content: center; margin-right: 5px; color: #fff; background: var(--green); border-radius: 50%; font-size: 12px; font-weight: 700; }

.hero-visual { position: relative; min-height: 610px; display: flex; align-items: center; justify-content: center; }

.visual-glow { position: absolute; width: 510px; height: 510px; border-radius: 50%; background: radial-gradient(circle, #dce9ff 0%, rgba(234, 241, 255, .2) 64%, transparent 68%); }

.phone-frame { position: relative; width: min(315px, 74vw); min-height: 600px; padding: 22px 18px 0; overflow: hidden; border: 8px solid #fff; border-radius: 39px; background: #fbfcff; box-shadow: var(--shadow), 0 0 0 1px #e5ebf6; transform: rotate(4deg); }

.phone-notch { position: absolute; top: 0; left: 50%; width: 106px; height: 23px; background: #fff; border-radius: 0 0 16px 16px; transform: translateX(-50%); }

.phone-status { display: flex; align-items: center; justify-content: space-between; padding: 0 7px; color: var(--navy); font-size: 9px; font-weight: 700; }

.phone-topline { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; color: var(--navy); font-size: 13px; }

.phone-menu { color: var(--ink-soft); font-size: 17px; }

.phone-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

.sync-pill { display: flex; align-items: center; gap: 7px; width: max-content; margin: 20px 0 0 auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink-soft); font-size: 8px; line-height: 1.35; }

.sync-pill > span { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; color: #fff; background: var(--green); border-radius: 50%; font-size: 10px; font-weight: 700; }

.sync-pill b, .sync-pill small { display: block; }

.sync-pill small { font-size: 8px; }

.score-orbit { position: relative; width: 206px; height: 206px; margin: 9px auto 17px; }

.score-orbit svg { width: 100%; height: 100%; }

.score-progress { animation: dash-in 1.4s ease-out both; }

.score-number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }

.score-number strong { color: var(--blue); font-size: 57px; letter-spacing: -.09em; line-height: 1; }

.score-number span { margin-top: 5px; color: var(--muted); font-size: 11px; }

.score-number em { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--green); font-size: 10px; font-style: normal; }

.score-number i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.health-grid > div { min-height: 90px; padding: 12px 11px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }

.health-grid b, .health-grid span { display: block; }

.health-grid b { margin-bottom: 3px; color: var(--navy); font-size: 25px; letter-spacing: -.06em; line-height: 1; }

.health-grid span { font-size: 9px; }

.danger { color: var(--red); }.warning { color: var(--orange); }.blue { color: var(--blue); }.safe { color: var(--green); }

.phone-nav { display: flex; justify-content: space-between; margin: 18px -18px 0; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 8px; }

.phone-nav span { display: flex; align-items: center; flex-direction: column; gap: 3px; }.phone-nav b { font-size: 16px; font-weight: 400; line-height: 1; }.phone-nav .active { color: var(--blue); }

.float-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; min-width: 192px; padding: 13px 15px; border: 1px solid rgba(224, 232, 248, .95); border-radius: 16px; background: rgba(255, 255, 255, .92); box-shadow: 0 15px 35px rgba(31, 57, 122, .1); animation: float 5s ease-in-out infinite; }

.float-note > span { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; color: var(--blue); background: var(--blue-pale); border-radius: 10px; font-size: 17px; font-weight: 700; }

.float-note b, .float-note small { display: block; }.float-note b { color: var(--navy); font-size: 11px; }.float-note small { color: var(--muted); font-size: 9px; }

.note-shield { top: 93px; right: -4px; }.note-lock { bottom: 83px; left: -5px; animation-delay: -2s; }.note-lock > span { color: var(--green); background: #e9f8ef; }

.hero-wave { position: absolute; bottom: -1px; left: -3%; width: 106%; height: 38px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #fff; }

.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }

.trust-grid { min-height: 93px; display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); align-items: center; gap: 20px; }

.trust-grid p { margin: 0; color: var(--ink-soft); font-size: 14px; }.trust-grid div { display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--navy); font-size: 13px; }.trust-grid div span { color: var(--blue); font-size: 12px; font-weight: 700; }

.trust-grid { grid-template-columns: 1.52fr repeat(3, 1fr); gap: 22px; }
.trust-grid div { justify-content: flex-start; gap: 10px; }
.trust-grid .trust-mark { display: inline-flex; width: 27px; height: 27px; flex: 0 0 27px; align-items: center; justify-content: center; color: var(--blue); border: 1px solid #d8e5ff; border-radius: 9px; background: #f4f8ff; font-size: 14px; }
.trust-grid b { font-size: 12px; letter-spacing: -.015em; }
.trust-grid-three { grid-template-columns: repeat(3, 1fr); }

.section-heading { max-width: 655px; margin-bottom: 49px; }.section-heading h2, .security-copy h2, .local-copy h2, .closing-card h2 { margin: 0; color: var(--navy); font-size: clamp(2.2rem, 4vw, 3.55rem); letter-spacing: -.065em; line-height: 1.06; }.section-heading > p:last-child, .security-copy > p, .local-copy > p { margin: 22px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.feature-card { min-height: 332px; display: flex; flex-direction: column; padding: 28px 27px 25px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }.feature-card:hover { border-color: #ccdaf6; box-shadow: 0 20px 44px rgba(31, 57, 122, .08); transform: translateY(-5px); }

.feature-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; margin-bottom: 29px; border-radius: 14px; font-size: 23px; font-weight: 700; }.icon-blue { color: var(--blue); background: var(--blue-pale); }.icon-green { color: var(--green); background: #eaf8ef; }.icon-orange { color: var(--orange); background: #fff3e7; }

.card-kicker { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.feature-card h3 { max-width: 260px; margin: 0; color: var(--navy); font-size: 21px; letter-spacing: -.04em; line-height: 1.2; }.feature-card > p:not(.card-kicker) { margin: 14px 0 20px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }.feature-card a { margin-top: auto; color: var(--blue); font-size: 13px; font-weight: 700; }

.security-section { background: #fff; }.security-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 96px; }.security-visual { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }.security-visual::before { position: absolute; width: 400px; height: 400px; border: 1px solid #e6edfc; border-radius: 50%; content: ''; }.security-visual::after { position: absolute; width: 310px; height: 310px; border: 1px dashed #dfe8fb; border-radius: 50%; content: ''; }.security-card { position: relative; z-index: 1; width: min(390px, 100%); padding: 25px 24px 18px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 18px 47px rgba(37, 69, 141, .1); }.security-card-head { display: flex; align-items: center; gap: 11px; }.shield-large { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: #fff; background: var(--blue); border-radius: 14px; font-size: 21px; font-weight: 700; }.security-card-head small, .security-card-head strong { display: block; }.security-card-head small { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; }.security-card-head strong { color: var(--navy); font-size: 15px; }.secure-chip { margin-left: auto; padding: 5px 9px; color: var(--green); background: #ebfaf0; border-radius: 999px; font-size: 10px; font-weight: 700; }.security-score-row { display: flex; align-items: center; gap: 18px; margin: 31px 0 25px; }.security-score-row > strong { color: var(--blue); font-size: 52px; letter-spacing: -.09em; line-height: 1; }.security-score-row span, .security-score-row small { display: block; color: var(--muted); font-size: 11px; }.mini-bar { width: 178px; height: 7px; margin: 10px 0 6px; overflow: hidden; border-radius: 99px; background: #eef2f8; }.mini-bar i { display: block; width: 82%; height: 100%; border-radius: inherit; background: var(--blue); }.security-list { border-top: 1px solid var(--line); }.security-list > div { display: flex; align-items: center; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line); }.security-list > div:last-child { border-bottom: 0; }.list-icon { display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 8px; font-size: 12px; font-weight: 700; }.list-icon.red { color: var(--red); background: #fff0f0; }.list-icon.amber { color: var(--orange); background: #fff5e8; }.list-icon.green { color: var(--green); background: #eaf9f0; }.security-list b { color: var(--navy); font-size: 17px; }.security-list span:not(.list-icon) { color: var(--ink-soft); font-size: 12px; }.security-list em { margin-left: auto; color: var(--blue); font-size: 11px; font-style: normal; font-weight: 700; }.security-list > div:last-child em { color: var(--green); }.orbit-dot { position: absolute; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 7px #e7efff; }.dot-one { top: 42px; right: 83px; }.dot-two { bottom: 65px; left: 45px; background: var(--green); box-shadow: 0 0 0 7px #e9f9f0; }.dot-three { top: 122px; left: 44px; width: 7px; height: 7px; background: var(--orange); box-shadow: 0 0 0 5px #fff2e4; }.security-copy { max-width: 525px; }.principles { margin: 30px 0 28px; border-top: 1px solid var(--line); }.principles > div { display: flex; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }.principles span { color: var(--blue); font-size: 12px; font-weight: 700; }.principles p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }.principles b { color: var(--navy); font-size: 15px; }.text-link { color: var(--blue); font-size: 14px; font-weight: 700; }.text-link span { display: inline-block; margin-left: 7px; transition: transform .2s ease; }.text-link:hover span { transform: translateX(4px); }

.devices-section { background: #fff; }
.devices-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 96px; }
.devices-visual { position: relative; min-height: 425px; display: flex; align-items: center; justify-content: center; }
.devices-visual::before { position: absolute; width: 412px; height: 300px; border-radius: 28px; background: #f1f5ff; content: ''; transform: rotate(-4deg); }
.desktop-device { position: relative; z-index: 1; width: min(410px, 100%); overflow: hidden; border: 1px solid #dfe7f5; border-radius: 18px; background: #fff; box-shadow: 0 20px 47px rgba(37, 69, 141, .12); transform: translateX(-30px); }
.desktop-bar { display: flex; align-items: center; height: 43px; padding: 0 15px; border-bottom: 1px solid #e9edf5; color: #63708d; background: #fbfcff; font-size: 11px; }
.desktop-bar b { margin: 0 auto; color: #5a6882; font-size: 11px; font-weight: 500; }
.window-dots { display: inline-flex; gap: 5px; }.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d3dced; }.window-dots i:first-child { background: #ffc7c5; }.window-dots i:nth-child(2) { background: #ffe0a8; }.desktop-lock { color: var(--blue); font-size: 16px; }
.desktop-content { padding: 27px 25px 24px; }.desktop-logo { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: 16px; font-weight: 700; }.desktop-file { display: flex; align-items: center; gap: 11px; margin-top: 25px; padding: 15px; border: 1px solid #dfe8fb; border-radius: 13px; background: #f8faff; }.desktop-file > span { display: flex; width: 33px; height: 33px; align-items: center; justify-content: center; color: var(--blue); border-radius: 10px; background: #e7efff; font-size: 17px; }.desktop-file b, .desktop-file small { display: block; }.desktop-file b { color: var(--navy); font-size: 12px; }.desktop-file small { margin-top: 1px; color: var(--muted); font-size: 10px; }.desktop-file em { margin-left: auto; color: var(--green); font-size: 12px; font-style: normal; }.desktop-lines { display: grid; gap: 9px; margin-top: 22px; }.desktop-lines i { display: block; height: 8px; border-radius: 99px; background: #eef2f8; }.desktop-lines i:first-child { width: 90%; }.desktop-lines i:nth-child(2) { width: 70%; }.desktop-lines i:last-child { width: 78%; }
.phone-device { position: absolute; z-index: 2; right: 2px; bottom: 11px; width: 143px; min-height: 248px; padding: 24px 12px 17px; overflow: hidden; border: 6px solid #fff; border-radius: 25px; background: #fbfcff; box-shadow: 0 18px 36px rgba(37, 69, 141, .15), 0 0 0 1px #dfe7f5; }.phone-device-notch { position: absolute; top: 0; left: 50%; width: 58px; height: 13px; border-radius: 0 0 10px 10px; background: #fff; transform: translateX(-50%); }.phone-device-top { display: flex; align-items: center; gap: 6px; color: var(--navy); font-size: 10px; font-weight: 700; }.phone-device-orb { display: flex; width: 72px; height: 72px; align-items: center; justify-content: center; margin: 29px auto 15px; border: 7px solid #e8f0ff; border-radius: 50%; background: #f8faff; }.phone-device-orb span { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; color: #fff; border-radius: 50%; background: var(--blue); font-size: 20px; }.phone-device > b, .phone-device > small { display: block; text-align: center; }.phone-device > b { color: var(--navy); font-size: 10px; }.phone-device > small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.network-link { position: absolute; z-index: 0; right: 95px; bottom: 87px; display: flex; align-items: center; gap: 4px; width: 155px; height: 20px; }.network-link::before { position: absolute; top: 9px; left: 0; right: 0; height: 1px; border-top: 1px dashed #91b4ff; content: ''; }.network-link span { z-index: 1; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #e6efff; }.network-link i { z-index: 1; width: 9px; height: 9px; margin-left: auto; border: 2px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #e9f8ef; }.network-tag { position: absolute; z-index: 3; right: 35px; bottom: -5px; padding: 6px 9px; color: #5880d4; border: 1px solid #d9e6ff; border-radius: 999px; background: #fff; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.devices-copy { max-width: 525px; }.devices-copy h2 { margin: 0; color: var(--navy); font-size: clamp(2.2rem, 4vw, 3.55rem); letter-spacing: -.065em; line-height: 1.06; }.devices-copy > p { margin: 22px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }

.eyebrow-light { color: #91b3ff; }.eyebrow-light .eyebrow-dot { background: #91b3ff; box-shadow: 0 0 0 6px rgba(145, 179, 255, .11); }.local-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }.local-copy h2 { color: #fff; }.local-copy > p:last-child { color: #afbad5; }.local-points { border-top: 1px solid rgba(255,255,255,.16); }.local-point { display: flex; align-items: flex-start; gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.16); }.local-point > span { display: flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; color: #91b3ff; border: 1px solid rgba(145,179,255,.4); border-radius: 12px; font-size: 18px; }.local-point b { display: block; color: #fff; font-size: 16px; }.local-point p { margin: 4px 0 0; color: #afbad5; font-size: 14px; line-height: 1.55; }

.policies { background: #fff; }.section-heading-centered { max-width: 720px; margin: 0 auto 48px; text-align: center; }.section-heading-centered .eyebrow { justify-content: center; }.policy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.policy-card { position: relative; min-height: 245px; display: flex; flex-direction: column; padding: 26px 26px 23px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }.policy-card:hover { border-color: #bfd0f0; box-shadow: 0 18px 40px rgba(31, 57, 122, .08); transform: translateY(-4px); }.policy-number { color: var(--blue); font-size: 12px; font-weight: 700; }.policy-arrow { position: absolute; top: 22px; right: 24px; color: var(--blue); font-size: 22px; }.policy-card h3 { margin: 35px 0 7px; color: var(--navy); font-size: 21px; letter-spacing: -.04em; }.policy-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }.policy-link { margin-top: auto; color: var(--blue); font-size: 13px; font-weight: 700; }

.closing-cta { padding-top: 25px; padding-bottom: 112px; }.closing-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 48px 54px; border-radius: var(--radius-lg); background: var(--blue); box-shadow: 0 22px 48px rgba(52,123,255,.2); }.closing-card .eyebrow { margin-bottom: 14px; color: #caDCff; }.closing-card h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }.site-footer { color: #b7c0d8; background: var(--navy-deep); }.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; padding: 62px 0 52px; }.brand-footer { color: #fff; }.footer-brand p { max-width: 250px; margin: 18px 0 0; font-size: 14px; line-height: 1.6; }.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }.footer-links div { display: flex; flex-direction: column; gap: 10px; }.footer-links b { margin-bottom: 4px; color: #fff; font-size: 13px; }.footer-links a { width: max-content; font-size: 13px; transition: color .2s ease; }.footer-links a:hover { color: #fff; }.footer-bottom { display: flex; justify-content: space-between; gap: 18px; padding: 19px 0 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; }

.nav-current { color: var(--blue); font-weight: 700; }

/* Prévia de dispositivos */
.desktop-app-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.desktop-network { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: #5d7bc0; border-radius: 999px; background: #edf3ff; font-size: 9px; }.desktop-network i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.desktop-home { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: center; margin-top: 18px; }.desktop-score { display: flex; width: 100px; height: 100px; align-items: center; justify-content: center; border: 7px solid #e7efff; border-top-color: var(--blue); border-radius: 50%; background: #fbfcff; }.desktop-score > div { text-align: center; }.desktop-score b, .desktop-score span, .desktop-score small { display: block; }.desktop-score b { color: var(--blue); font-size: 27px; letter-spacing: -.08em; line-height: 1; }.desktop-score span { margin-top: 3px; color: var(--muted); font-size: 8px; }.desktop-score small { margin-top: 3px; color: var(--green); font-size: 8px; }.desktop-score small i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: var(--green); }.desktop-health { min-width: 0; }.desktop-health > b { display: block; margin-bottom: 8px; color: var(--navy); font-size: 12px; }.desktop-health > div { display: grid; gap: 6px; }.desktop-health span { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 9px; }.desktop-health i { width: 6px; height: 6px; border-radius: 50%; }.health-red { background: var(--red); }.health-orange { background: var(--orange); }.health-green { background: var(--green); }.desktop-file { margin-top: 17px; }
.phone-mini-title { margin-top: 19px; color: var(--navy); font-size: 9px; font-weight: 700; }.phone-device-orb { flex-direction: column; gap: 2px; width: 66px; height: 66px; margin: 16px auto 12px; border-width: 6px; }.phone-device-orb b { color: var(--blue); font-size: 24px; letter-spacing: -.07em; line-height: 1; }.phone-device-orb span { display: block; width: auto; height: auto; color: var(--green); background: transparent; font-size: 8px; }.phone-mini-row { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--ink-soft); font-size: 8px; }.phone-mini-row i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* Shared FAQ styles */
.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 0; color: var(--navy); cursor: pointer; font-size: 16px; font-weight: 700; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--blue); font-size: 20px; font-weight: 400; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { max-width: 590px; margin: -6px 0 21px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }

/* Página de download */
.download-hero { position: relative; overflow: hidden; padding-top: 83px; padding-bottom: 95px; background: linear-gradient(145deg, #f9fbff, #fff 67%); }.download-hero::before { position: absolute; left: -250px; bottom: -320px; width: 570px; height: 570px; border-radius: 50%; background: #eef4ff; content: ''; }.download-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 84px; }.download-orbit { position: relative; width: min(455px, 100%); height: 390px; margin: 0 auto; }.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid #dce7fc; border-radius: 50%; transform: translate(-50%, -50%); }.ring-one { width: 315px; height: 315px; }.ring-two { width: 425px; height: 425px; border-style: dashed; }.orbit-center { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; width: 128px; height: 128px; align-items: center; flex-direction: column; justify-content: center; gap: 5px; border: 8px solid #fff; border-radius: 32px; background: #f7faff; box-shadow: 0 17px 38px rgba(47,82,158,.14), 0 0 0 1px #dfe8fa; transform: translate(-50%, -50%) rotate(-5deg); }.orbit-center b { color: var(--navy); font-size: 13px; }.orbit-platform { position: absolute; z-index: 2; display: flex; min-width: 116px; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid #dce6f8; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 12px 25px rgba(49,79,145,.1); }.orbit-platform > span { display: flex; width: 29px; height: 29px; align-items: center; justify-content: center; color: var(--blue); border-radius: 9px; background: var(--blue-pale); font-size: 16px; }.orbit-platform b, .orbit-platform small { display: block; }.orbit-platform b { color: var(--navy); font-size: 11px; }.orbit-platform small { margin-top: 1px; color: var(--muted); font-size: 9px; }.orbit-windows { top: 21px; right: 23px; }.orbit-android { bottom: 19px; right: 2px; }.orbit-github { bottom: 53px; left: 0; }.orbit-github > span { color: #6e7d99; background: #edf1f7; }.download-choices { background: var(--surface-soft); }.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.download-card { min-height: 330px; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 19px; background: #fff; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }.download-card:hover { border-color: #c4d5f5; box-shadow: 0 18px 39px rgba(42,73,139,.08); transform: translateY(-4px); }.download-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.platform-icon { display: flex; width: 45px; height: 45px; align-items: center; justify-content: center; border-radius: 14px; font-size: 23px; }.icon-windows { color: var(--blue); background: var(--blue-pale); }.icon-android { color: var(--green); background: #eaf8ef; }.icon-github { color: #65738f; background: #edf1f7; }.release-chip { padding: 5px 7px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font-size: 8px; font-weight: 700; letter-spacing: .07em; }.download-card h3 { margin: 28px 0 9px; color: var(--navy); font-size: 21px; letter-spacing: -.04em; }.download-card > p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.62; }.download-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; margin-top: auto; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }.disabled-download { color: var(--blue); font-weight: 700; }.release-section { background: #fff; }.release-grid { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 95px; }.release-copy h2 { margin: 0; color: var(--navy); font-size: clamp(2.2rem, 4vw, 3.55rem); letter-spacing: -.065em; line-height: 1.06; }.release-copy > p { margin: 22px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }.release-list { border-top: 1px solid var(--line); }.release-list > div { display: flex; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }.release-list span { color: var(--blue); font-size: 12px; font-weight: 700; }.release-list p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }.release-list b { color: var(--navy); font-size: 15px; }

/* Document pages */
.document-shell { min-height: 100vh; background: var(--surface-soft); }.document-header { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); }.document-nav { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 14px; font-weight: 700; }.document-main { padding: 80px 0 105px; }.document-intro { max-width: 720px; padding-bottom: 47px; }.document-intro h1 { margin: 0; color: var(--navy); font-size: clamp(2.6rem, 5vw, 4.6rem); letter-spacing: -.075em; line-height: 1.03; }.document-intro p:not(.eyebrow) { margin: 22px 0 0; color: var(--ink-soft); font-size: 18px; line-height: 1.7; }.draft-notice { display: inline-flex; margin-top: 22px; padding: 9px 13px; color: #93600e; border: 1px solid #f5ddb0; border-radius: 9px; background: #fff9eb; font-size: 13px; font-weight: 500; }.document-layout { display: grid; grid-template-columns: 240px minmax(0, 720px); align-items: start; gap: 65px; }.document-toc { position: sticky; top: 105px; padding: 18px 0; border-top: 1px solid var(--line); }.document-toc b { display: block; margin-bottom: 12px; color: var(--navy); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }.document-toc a { display: block; padding: 5px 0; color: var(--ink-soft); font-size: 13px; }.document-toc a:hover { color: var(--blue); }.document-content { padding: 2px 0; }.document-content section { padding: 0 0 38px; margin-bottom: 38px; border-bottom: 1px solid var(--line); }.document-content section:last-child { margin-bottom: 0; border-bottom: 0; }.document-content h2 { margin: 0 0 15px; color: var(--navy); font-size: 25px; letter-spacing: -.045em; line-height: 1.2; }.document-content h3 { margin: 25px 0 9px; color: var(--navy); font-size: 18px; }.document-content p, .document-content li { color: var(--ink-soft); font-size: 16px; line-height: 1.75; }.document-content p { margin: 0 0 14px; }.document-content ul { margin: 8px 0 18px; padding-left: 22px; }.document-content li::marker { color: var(--blue); }.document-content strong { color: var(--navy); }.document-content a { color: var(--blue); text-decoration: underline; text-decoration-color: #b8cdfa; text-underline-offset: 3px; }.document-footer { background: var(--navy-deep); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: none; }.reveal-delay-short { transition-delay: .09s; }.reveal-delay { transition-delay: .16s; }

@keyframes dash-in { from { stroke-dasharray: 0 452; } to { stroke-dasharray: 365 452; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.score-progress, .float-note { animation: none; } * { transition-duration: .01ms !important; } }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr .88fr; gap: 35px; }.hero h1 { font-size: clamp(3rem, 7vw, 4.8rem); }.hero-lead { font-size: 17px; }.phone-frame { transform: rotate(3deg) scale(.92); }.note-shield { right: -18px; }.note-lock { left: -25px; }.security-grid, .local-grid { gap: 50px; }.security-grid { grid-template-columns: .9fr 1.1fr; }.feature-card { min-height: 360px; }.document-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 42px; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 36px), var(--max-width)); }.section-pad { padding: 78px 0; }.nav-shell { min-height: 70px; }.menu-toggle { display: block; }.main-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 18px 18px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 15px 24px rgba(24,39,85,.08); }.main-nav.is-open { display: flex; }.main-nav > a { padding: 13px 0; }.main-nav .nav-cta { justify-content: center; margin-top: 8px; }.hero { padding-top: 58px; }.hero-grid { grid-template-columns: 1fr; gap: 24px; }.hero-copy { text-align: center; }.hero .eyebrow, .hero-actions, .hero-notes { justify-content: center; }.hero h1 { font-size: clamp(3rem, 14vw, 4.3rem); }.hero-lead { margin-right: auto; margin-left: auto; font-size: 16px; }.hero-visual { min-height: 560px; margin-top: -4px; }.phone-frame { transform: rotate(3deg) scale(.86); }.note-shield { right: 0; }.note-lock { left: 0; }.trust-grid { grid-template-columns: 1fr 1fr; gap: 17px 10px; padding: 23px 0; }.trust-grid p { grid-column: 1 / -1; text-align: center; }.trust-grid div { justify-content: flex-start; font-size: 12px; }.section-heading, .section-heading-centered { margin-bottom: 34px; }.section-heading h2, .security-copy h2, .local-copy h2, .closing-card h2 { font-size: clamp(2.15rem, 10vw, 3.1rem); }.section-heading > p:last-child, .security-copy > p, .local-copy > p { font-size: 16px; }.feature-grid, .policy-grid { grid-template-columns: 1fr; }.feature-card { min-height: 0; }.feature-card h3 { max-width: 100%; }.security-grid, .local-grid { grid-template-columns: 1fr; gap: 55px; }.security-visual { min-height: 390px; }.security-copy { max-width: none; }.local-points { margin-top: 0; }.closing-cta { padding-top: 5px; padding-bottom: 78px; }.closing-card { align-items: flex-start; flex-direction: column; padding: 34px 27px; }.footer-grid { grid-template-columns: 1fr; gap: 37px; padding: 48px 0 39px; }.footer-bottom { flex-direction: column; gap: 4px; }.document-main { padding: 56px 0 78px; }.document-intro p:not(.eyebrow) { font-size: 16px; }.document-layout { grid-template-columns: 1fr; gap: 27px; }.document-toc { position: static; padding: 15px 0; }.document-toc a { display: inline-block; margin: 0 15px 0 0; }.document-content h2 { font-size: 23px; }.document-content p, .document-content li { font-size: 15px; }
}

@media (max-width: 430px) {
  .hero-actions { align-items: stretch; flex-direction: column; }.hero-actions .button { width: 100%; }.hero-notes { align-items: center; flex-direction: column; gap: 8px; }.hero-visual { min-height: 535px; }.phone-frame { transform: rotate(2deg) scale(.78); }.float-note { min-width: 170px; padding: 10px; }.float-note b { font-size: 10px; }.float-note small { font-size: 8px; }.note-shield { top: 61px; right: -5px; }.note-lock { bottom: 53px; left: -5px; }.security-card { padding: 20px 17px 12px; }.mini-bar { width: 130px; }.security-visual::before { width: 340px; height: 340px; }.security-visual::after { width: 270px; height: 270px; }.security-list span:not(.list-icon) { font-size: 11px; }.policy-card { min-height: 220px; }.footer-links { gap: 18px; }
}

/* Documentation and support tools */
.documentation-shell { background: #f5f8fe; }
.documentation-main { padding-top: 65px; }
.documentation-hero { display: block; max-width: 760px; padding-bottom: 54px; }
.documentation-hero h1 { margin: 0; color: var(--navy); font-size: clamp(2.8rem, 6vw, 4.65rem); letter-spacing: -.075em; line-height: 1.02; }
.documentation-hero p:not(.eyebrow) { max-width: 670px; margin: 20px 0 0; color: var(--ink-soft); font-size: 18px; line-height: 1.7; }
.documentation-layout { display: grid; grid-template-columns: 238px minmax(0, 760px); align-items: start; gap: 62px; }
.documentation-index { position: sticky; top: 104px; padding: 10px 0 8px; border-top: 1px solid #dfe7f5; }
.documentation-index-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 17px; color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.documentation-index-head span:last-child { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.documentation-index a { display: flex; align-items: center; gap: 13px; padding: 12px 11px; border-radius: 11px; color: var(--ink-soft); font-size: 14px; transition: color .2s ease, background .2s ease, transform .2s ease; }.documentation-index a:hover { color: var(--blue); background: #fff; transform: translateX(3px); }.documentation-index a b { width: 23px; color: #a3b0c9; font-size: 11px; letter-spacing: .06em; }.documentation-index a:hover b { color: var(--blue); }
.documentation-content { min-width: 0; padding-bottom: 30px; }.doc-section { padding: 8px 0 53px; margin-bottom: 51px; border-bottom: 1px solid #dfe7f5; scroll-margin-top: 100px; }.doc-section:last-child { margin-bottom: 0; border-bottom: 0; }.doc-section-intro { padding-top: 0; }.doc-section-label { display: flex; align-items: center; gap: 11px; margin-bottom: 17px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.doc-section-label span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #c9d9fb; border-radius: 9px; background: #edf3ff; }.doc-section-label em { color: var(--muted); font-style: normal; }.doc-section h2 { margin: 0 0 16px; color: var(--navy); font-size: clamp(1.75rem, 3.2vw, 2.45rem); letter-spacing: -.055em; line-height: 1.1; }.doc-section > p, .doc-reading-grid p, .doc-feature-list p, .doc-security-table p { color: var(--ink-soft); font-size: 16px; line-height: 1.72; }.doc-section > p { max-width: 710px; margin: 0; }.doc-section h3 { margin: 0 0 8px; color: var(--navy); font-size: 17px; letter-spacing: -.02em; }.doc-reading-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }.doc-reading-grid > div { padding-top: 17px; border-top: 2px solid #dfe8fa; }.doc-reading-grid p, .doc-feature-list p, .doc-security-table p { margin: 0; }.doc-callout { display: flex; align-items: flex-start; gap: 13px; padding: 17px 18px; margin-top: 28px; border: 1px solid; border-radius: 14px; }.doc-callout > span { display: grid; flex: 0 0 auto; width: 24px; height: 24px; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 700; }.doc-callout p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }.doc-callout strong { color: var(--navy); }.doc-callout-blue { border-color: #d8e5ff; background: #f1f5ff; }.doc-callout-blue > span { color: var(--blue); background: #dce8ff; }.doc-callout-yellow { border-color: #f6dfb2; background: #fffaf0; }.doc-callout-yellow > span { color: #a96d09; background: #ffedc3; }.doc-callout-red { border-color: #f5d2d2; background: #fff4f4; }.doc-callout-red > span { color: var(--red); background: #ffe0e0; }
.doc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 31px; }.doc-steps > div { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 13px; border: 1px solid #dfe7f5; border-radius: 13px; background: #fff; }.doc-steps b { display: grid; flex: 0 0 auto; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-pale); font-size: 11px; }.doc-steps p { margin: 0; color: var(--navy); font-size: 13px; line-height: 1.35; }.doc-steps-vertical { display: grid; grid-template-columns: 1fr; max-width: 620px; gap: 0; border-top: 1px solid #e1e8f4; }.doc-steps-vertical > div { padding: 15px 0; border: 0; border-bottom: 1px solid #e1e8f4; border-radius: 0; background: transparent; }.doc-steps-vertical p { font-size: 15px; }.doc-feature-list { margin-top: 28px; border-top: 1px solid #dfe7f5; }.doc-feature-list > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 19px 0; border-bottom: 1px solid #dfe7f5; }.doc-feature-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--blue); background: var(--blue-pale); font-size: 19px; font-weight: 700; }.doc-feature-list > div:nth-child(2) .doc-feature-icon { color: var(--green); background: #edf9f2; }.doc-feature-list > div:nth-child(3) .doc-feature-icon { color: var(--orange); background: #fff4e8; }.doc-sync-diagram { display: flex; align-items: center; justify-content: center; gap: 23px; padding: 24px; margin: 29px 0 30px; border: 1px solid #dfe7f5; border-radius: 18px; background: #fff; }.doc-sync-diagram > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 150px; }.doc-sync-diagram > div > span { display: grid; grid-row: span 2; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-pale); font-size: 17px; }.doc-sync-diagram b { color: var(--navy); font-size: 15px; }.doc-sync-diagram small { color: var(--muted); font-size: 12px; }.doc-sync-diagram > i { color: var(--blue); font-size: 24px; font-style: normal; }
.doc-security-table { margin-top: 27px; border-top: 1px solid #dfe7f5; }.doc-security-table > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 15px; padding: 18px 0; border-bottom: 1px solid #dfe7f5; }.doc-security-table > div > span { color: var(--blue); font-size: 12px; font-weight: 700; }.doc-final-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }.doc-final-links a { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 11px; align-items: center; padding: 14px; border: 1px solid #dfe7f5; border-radius: 14px; background: #fff; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }.doc-final-links a:hover { border-color: #c5d7fb; box-shadow: 0 10px 24px rgba(41, 74, 139, .07); transform: translateY(-2px); }.doc-final-links a > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-pale); font-size: 18px; font-weight: 700; }.doc-final-links b, .doc-final-links small { display: block; }.doc-final-links b { color: var(--navy); font-size: 13px; }.doc-final-links small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }.doc-final-links strong { color: var(--blue); font-size: 19px; }
.support-search-panel { padding: 23px 25px 20px; margin: 0 0 46px; border: 1px solid #dbe6f8; border-radius: 18px; background: #fff; box-shadow: 0 14px 35px rgba(37, 71, 137, .06); }.support-search-label { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 15px; font-weight: 700; }.search-symbol { color: var(--blue); font-size: 23px; line-height: 1; }.support-search-panel input { display: block; width: 100%; padding: 14px 16px; margin-top: 12px; border: 1px solid #d8e2f2; border-radius: 11px; outline: 0; color: var(--navy); background: #f8faff; font: inherit; font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease; }.support-search-panel input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(52, 123, 255, .12); }.support-search-panel input::placeholder { color: #9aa6bb; }.support-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }.support-keywords button { padding: 7px 11px; border: 1px solid #dce5f5; border-radius: 999px; color: var(--ink-soft); background: #fff; cursor: pointer; font: inherit; font-size: 13px; }.support-keywords button:hover, .support-keywords button.is-active { border-color: #bcd2ff; color: var(--blue); background: #f1f5ff; }.support-search-status { margin: 13px 0 0; color: var(--muted); font-size: 13px; }.support-content section { padding-bottom: 22px; }.support-item { border-top: 1px solid var(--line); }.support-item:last-child { border-bottom: 1px solid var(--line); }.support-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; color: var(--navy); cursor: pointer; font-size: 16px; font-weight: 700; list-style: none; }.support-item summary::-webkit-details-marker { display: none; }.support-item summary span { flex: 0 0 auto; color: var(--blue); font-size: 22px; font-weight: 400; transition: transform .2s ease; }.support-item[open] summary span { transform: rotate(45deg); }.support-item > p { max-width: 680px; padding: 0 37px 20px 0; margin: -3px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }.support-item[hidden] { display: none; }.support-content section.support-section-hidden { display: none; }.support-contact { padding: 18px 20px; border: 1px solid #dfe7f5; border-radius: 14px; background: #fff; }.support-contact p { margin: 0 0 12px; }.support-contact p:last-child { margin-bottom: 0; }.support-empty { max-width: 650px; padding: 21px; margin: 10px 0 0; border: 1px dashed #bfcfea; border-radius: 14px; color: var(--ink-soft); background: #fff; font-size: 15px; line-height: 1.55; }.support-empty button { padding: 0; border: 0; color: var(--blue); background: transparent; cursor: pointer; font: inherit; font-weight: 700; text-decoration: underline; }

@media (max-width: 760px) {
  .documentation-main { padding-top: 51px; }.documentation-hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: 39px; }.documentation-hero p:not(.eyebrow) { font-size: 16px; }.documentation-mark { width: 145px; height: 145px; border-radius: 34px; }.documentation-mark span { width: 62px; height: 62px; border-radius: 19px; font-size: 21px; }.documentation-mark::before { inset: 11px; border-radius: 25px; }.documentation-layout { grid-template-columns: 1fr; gap: 32px; }.documentation-index { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 12px 0; }.documentation-index-head { grid-column: 1 / -1; padding: 0 0 9px; }.documentation-index a { padding: 9px 8px; font-size: 13px; }.doc-section { padding-bottom: 39px; margin-bottom: 38px; }.doc-section > p, .doc-reading-grid p, .doc-feature-list p, .doc-security-table p { font-size: 15px; }.doc-reading-grid, .doc-final-links { grid-template-columns: 1fr; gap: 22px; }.doc-steps { grid-template-columns: 1fr; }.doc-sync-diagram { align-items: stretch; flex-direction: column; gap: 13px; }.doc-sync-diagram > div { width: 100%; }.doc-sync-diagram > i { align-self: center; transform: rotate(90deg); }.support-search-panel { padding: 20px 18px 17px; margin-bottom: 35px; }.support-item summary { font-size: 15px; }.support-item > p { padding-right: 0; font-size: 15px; }
}

@media (max-width: 980px) {
  .devices-grid { gap: 50px; grid-template-columns: .9fr 1.1fr; }
  .desktop-device { transform: translateX(-14px); }
  .phone-device { right: -12px; }
}

@media (max-width: 760px) {
  .trust-grid-three { grid-template-columns: 1fr 1fr; }
  .trust-grid-three > div:last-child { grid-column: 1 / -1; justify-content: center; }
  .devices-grid { grid-template-columns: 1fr; gap: 54px; }
  .devices-visual { min-height: 400px; }
  .devices-copy { max-width: none; }
  .devices-copy h2 { font-size: clamp(2.15rem, 10vw, 3.1rem); }
  .devices-copy > p { font-size: 16px; }
}

@media (max-width: 430px) {
  .trust-grid-three { grid-template-columns: 1fr; gap: 12px; }
  .trust-grid-three > div:last-child { grid-column: auto; justify-content: flex-start; }
  .devices-visual { min-height: 350px; }
  .devices-visual::before { width: 320px; height: 250px; }
  .desktop-device { width: 315px; transform: translateX(-13px); }
  .desktop-content { padding: 21px 18px 18px; }
  .phone-device { right: -4px; bottom: 8px; width: 123px; min-height: 220px; }
  .network-link { right: 71px; bottom: 74px; width: 130px; }
  .network-tag { right: 6px; }
  .desktop-file { margin-top: 18px; padding: 11px; }
}

@media (max-width: 980px) {
  .download-hero-grid { gap: 46px; }
  .release-grid { gap: 54px; }
  .desktop-home { grid-template-columns: 84px 1fr; }.desktop-score { width: 84px; height: 84px; }
}

@media (max-width: 760px) {
  .download-hero { padding-top: 59px; padding-bottom: 72px; }
  .download-hero-grid { grid-template-columns: 1fr; gap: 45px; }
  .download-copy h1 { font-size: clamp(3rem, 14vw, 4.3rem); }
  .download-copy > p:not(.eyebrow) { font-size: 16px; }
  .release-grid { grid-template-columns: 1fr; gap: 51px; }
  .backup-copy h2, .release-copy h2 { font-size: clamp(2.15rem, 10vw, 3.1rem); }
  .backup-copy > p:not(.eyebrow), .release-copy > p { font-size: 16px; }
  .download-orbit { height: 360px; transform: scale(.92); transform-origin: center; }
  .download-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .download-note { padding: 12px; }
  .download-orbit { width: 390px; margin-left: 50%; transform: translateX(-50%) scale(.8); transform-origin: center; }
  .download-card { min-height: 0; padding: 23px; }
  .desktop-app-head .desktop-network { display: none; }.desktop-home { grid-template-columns: 73px 1fr; gap: 10px; }.desktop-score { width: 73px; height: 73px; border-width: 6px; }.desktop-score b { font-size: 23px; }.desktop-health > b { font-size: 10px; }.desktop-health span { font-size: 8px; }
}

/* Prévia mobile com a composição visual da tela de referência */
.phone-device { width: 228px; height: 420px; min-height: 0; right: -5px; bottom: 0; padding: 17px 14px 0; box-sizing: border-box; border: 1px solid #eef3fb; border-radius: 29px; background: #fff; box-shadow: 0 20px 42px rgba(37, 69, 141, .12); }
.phone-skeleton-bars { display: grid; justify-items: center; gap: 11px; }
.phone-skeleton-bars i { display: block; height: 11px; border-radius: 99px; }
.phone-skeleton-bars .is-primary { width: 51%; background: var(--blue); box-shadow: 0 5px 12px rgba(52, 123, 255, .18); }
.phone-skeleton-bars .is-secondary { width: 76%; height: 8px; background: #d9deea; }
.phone-device-score { width: 148px; height: 148px; margin: 16px auto 12px; }
.phone-score-track { border-width: 7px; border-color: #e6efff; }
.phone-score-track i { inset: -7px; border-width: 7px; border-top-color: var(--blue); border-right-color: var(--blue); transform: rotate(14deg); }
.phone-device-score b { font-size: 43px; letter-spacing: -.11em; }
.phone-score-line { display: block; width: 58px; height: 9px; margin: 9px auto 0; border-radius: 99px; background: #d9deea; }
.phone-device-score em { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 11px; }
.phone-device-score em i { width: 10px; height: 10px; margin: 0; background: #ff4d51; }
.phone-device-score em span { display: block; width: 42px; height: 12px; border-radius: 99px; background: #ffd0d1; }
.phone-device-metrics { gap: 10px; }
.phone-metric { min-height: 73px; padding: 10px 10px 9px; border-color: #deebff; border-radius: 13px; }
.phone-metric-icon { width: 25px; height: 25px; border-radius: 0; background: transparent; }
.phone-metric-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.phone-metric b { margin-top: 7px; font-size: 27px; }
.phone-metric-line { display: block; width: 72%; height: 9px; margin-top: 7px; border-radius: 99px; background: #d9deea; }
.phone-metric-red .phone-metric-icon { background: transparent; }.phone-metric-orange .phone-metric-icon, .phone-metric-blue .phone-metric-icon, .phone-metric-green .phone-metric-icon { background: transparent; }
.phone-device-nav { flex-basis: 52px; margin: 12px -14px 0; padding: 6px 9px 7px; border-top-color: #e1e9f6; }
.phone-nav-item { gap: 5px; }.phone-nav-item svg { width: 23px; height: 23px; }.phone-nav-item > span { display: block; width: 52px; height: 8px; border-radius: 99px; background: #d9deea; }.phone-nav-item.is-active::after { display: none; }.phone-nav-item.is-active > span { background: var(--blue); }

@media (max-width: 760px) {
  .phone-device { width: 213px; height: 392px; padding: 15px 13px 0; }
  .phone-device-score { width: 138px; height: 138px; margin-top: 14px; }.phone-device-score b { font-size: 40px; }
  .phone-metric { min-height: 68px; padding: 9px; }.phone-metric b { font-size: 25px; }.phone-device-nav { margin-left: -13px; margin-right: -13px; }
}

@media (max-width: 430px) {
  .phone-device { width: 172px; height: 316px; right: 0; padding: 12px 10px 0; border-radius: 23px; }
  .phone-skeleton-bars { gap: 8px; }.phone-skeleton-bars i { height: 8px; }.phone-skeleton-bars .is-secondary { height: 6px; }
  .phone-device-score { width: 108px; height: 108px; margin: 10px auto 8px; }.phone-score-track, .phone-score-track i { border-width: 5px; }.phone-score-track i { inset: -5px; }.phone-device-score b { font-size: 31px; }.phone-score-line { width: 43px; height: 7px; margin-top: 6px; }.phone-device-score em { gap: 3px; margin-top: 7px; }.phone-device-score em i { width: 7px; height: 7px; }.phone-device-score em span { width: 31px; height: 9px; }
  .phone-device-metrics { gap: 6px; }.phone-metric { min-height: 52px; padding: 7px; border-radius: 10px; }.phone-metric-icon { width: 19px; height: 19px; }.phone-metric-icon svg { width: 19px; height: 19px; }.phone-metric b { margin-top: 4px; font-size: 21px; }.phone-metric-line { height: 6px; margin-top: 4px; }
  .phone-device-nav { flex-basis: 39px; margin: 8px -10px 0; padding: 4px 5px; }.phone-nav-item { gap: 3px; }.phone-nav-item svg { width: 18px; height: 18px; }.phone-nav-item > span { width: 39px; height: 6px; }
}

/* Réplica compacta da tela mobile na seção de dispositivos */
.devices-visual { min-height: 510px; }
.phone-device { display: flex; flex-direction: column; width: 206px; height: 472px; min-height: 0; right: -5px; bottom: 0; padding: 10px 10px 0; box-sizing: border-box; border: 5px solid #fff; border-radius: 31px; background: #fff; box-shadow: 0 22px 45px rgba(37, 69, 141, .16), 0 0 0 1px #dfe7f5; }
.phone-device-status { display: flex; align-items: center; justify-content: space-between; padding: 0 3px; color: #6f7c95; font-size: 7px; font-weight: 700; }
.phone-device-status span:last-child { letter-spacing: .06em; }
.phone-device-top { display: flex; align-items: center; gap: 5px; margin-top: 9px; color: var(--navy); font-size: 9px; font-weight: 700; }
.phone-device-top img { width: 17px; height: 17px; }
.phone-device-network { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 4px 6px; color: #5e78b8; border-radius: 999px; background: #edf3ff; font-size: 6.5px; font-weight: 600; white-space: nowrap; }
.phone-device-network i { width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
.phone-device-content { flex: 1; min-height: 0; padding: 0 2px; }
.phone-device-title { margin-top: 13px; color: var(--navy); font-size: 10px; font-weight: 700; }
.phone-device-score { position: relative; display: grid; width: 128px; height: 128px; place-items: center; margin: 10px auto 12px; }
.phone-score-track { position: absolute; inset: 0; border: 6px solid #e8f0ff; border-radius: 50%; transform: rotate(-20deg); }
.phone-score-track i { position: absolute; inset: -6px; border: 6px solid transparent; border-top-color: var(--blue); border-right-color: var(--blue); border-radius: 50%; transform: rotate(14deg); }
.phone-device-score > div { position: relative; z-index: 1; text-align: center; }
.phone-device-score b, .phone-device-score small, .phone-device-score em { display: block; }
.phone-device-score b { color: var(--blue); font-size: 31px; letter-spacing: -.1em; line-height: .95; }
.phone-device-score small { margin-top: 5px; color: var(--muted); font-size: 7.5px; }
.phone-device-score em { margin-top: 4px; color: var(--green); font-size: 8px; font-style: normal; }
.phone-device-score em i { display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: var(--green); }
.phone-device-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.phone-metric { min-width: 0; min-height: 69px; padding: 8px 8px 7px; box-sizing: border-box; border: 1px solid #dfe7f5; border-radius: 13px; background: #fff; }
.phone-metric-icon { display: flex; width: 19px; height: 19px; align-items: center; justify-content: center; border-radius: 6px; background: #fff3f3; }
.phone-metric-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.phone-metric b, .phone-metric small { display: block; }
.phone-metric b { margin-top: 5px; color: var(--blue); font-size: 20px; letter-spacing: -.08em; line-height: 1; }
.phone-metric small { overflow: hidden; margin-top: 3px; color: var(--ink-soft); font-size: 7px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.phone-metric-red .phone-metric-icon { color: var(--red); }.phone-metric-red b { color: var(--red); }.phone-metric-red small { color: var(--red); }
.phone-metric-orange .phone-metric-icon { color: var(--orange); background: #fff6ea; }.phone-metric-orange b { color: var(--orange); }.phone-metric-orange small { color: var(--orange); }
.phone-metric-blue .phone-metric-icon { color: var(--blue); background: #eef3ff; }.phone-metric-blue small { color: var(--blue); }
.phone-metric-green .phone-metric-icon { color: var(--green); background: #edf9f2; }.phone-metric-green small { color: var(--green); }
.phone-device-nav { display: grid; grid-template-columns: repeat(4, 1fr); flex: 0 0 46px; align-items: center; margin: 9px -10px 0; padding: 4px 7px 4px; border-top: 1px solid #e7edf7; background: #fff; }
.phone-nav-item { display: flex; align-items: center; flex-direction: column; gap: 3px; color: #9ba8be; }
.phone-nav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.phone-nav-item small { font-size: 6.5px; }.phone-nav-item.is-active { color: var(--blue); }.phone-nav-item.is-active::after { width: 22px; height: 3px; margin-top: 1px; border-radius: 99px; background: var(--blue); content: ''; }

@media (max-width: 760px) {
  .devices-visual { min-height: 490px; }
  .phone-device { width: 192px; height: 440px; right: -2px; }
}

@media (max-width: 430px) {
  .devices-visual { min-height: 400px; }
  .phone-device { width: 160px; height: 367px; right: 0; padding: 8px 8px 0; border-width: 4px; border-radius: 25px; }
  .phone-device-top { margin-top: 6px; font-size: 7.5px; }.phone-device-top img { width: 14px; height: 14px; }.phone-device-network { padding: 3px 4px; font-size: 5.5px; }
  .phone-device-title { margin-top: 9px; font-size: 8px; }.phone-device-score { width: 99px; height: 99px; margin: 7px auto 8px; }.phone-score-track, .phone-score-track i { border-width: 5px; }.phone-score-track i { inset: -5px; }.phone-device-score b { font-size: 24px; }.phone-device-score small { margin-top: 3px; font-size: 6px; }.phone-device-score em { margin-top: 3px; font-size: 6.5px; }
  .phone-device-metrics { gap: 5px; }.phone-metric { min-height: 54px; padding: 6px; border-radius: 10px; }.phone-metric-icon { width: 15px; height: 15px; border-radius: 5px; }.phone-metric-icon svg { width: 10px; height: 10px; }.phone-metric b { margin-top: 3px; font-size: 16px; }.phone-metric small { margin-top: 2px; font-size: 5.5px; }
  .phone-device-nav { flex-basis: 37px; margin: 6px -8px 0; padding: 2px 5px; }.phone-nav-item { gap: 2px; }.phone-nav-item svg { width: 12px; height: 12px; }.phone-nav-item small { font-size: 5px; }.phone-nav-item.is-active::after { width: 18px; height: 2px; }
}

/* Proporções da referência: tela limpa, sem moldura de aparelho. */
.devices-visual { min-height: 650px; }
.phone-device { width: 314px; height: 602px; right: -10px; bottom: 0; padding: 28px 10px 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.network-link, .network-tag { display: none; }
.phone-skeleton-bars { gap: 13px; }
.phone-skeleton-bars i { height: 16px; }.phone-skeleton-bars .is-primary { width: 46%; }.phone-skeleton-bars .is-secondary { width: 76%; height: 11px; }
.phone-device-score { width: 190px; height: 190px; margin: 20px auto 18px; }
.phone-score-track { border-width: 9px; }.phone-score-track i { inset: -9px; border-width: 9px; }
.phone-device-score b { font-size: 62px; }.phone-score-line { width: 75px; height: 12px; margin-top: 12px; }.phone-device-score em { gap: 7px; margin-top: 13px; }.phone-device-score em i { width: 14px; height: 14px; }.phone-device-score em span { width: 57px; height: 16px; }
.phone-device-metrics { gap: 13px; }.phone-metric { min-height: 108px; padding: 14px; border-width: 2px; border-radius: 16px; }.phone-metric-icon { width: 40px; height: 40px; }.phone-metric-icon svg { width: 39px; height: 39px; stroke-width: 1.8; }.phone-metric b { margin-top: 11px; font-size: 45px; }.phone-metric-line { width: 62%; height: 13px; margin-top: 11px; }
.phone-device-nav { flex-basis: 72px; margin: 21px -10px 0; padding: 9px 12px 10px; border-top-width: 2px; }.phone-nav-item { gap: 8px; }.phone-nav-item svg { width: 31px; height: 31px; }.phone-nav-item > span { width: 55px; height: 10px; }

@media (max-width: 980px) {
  .devices-visual { min-height: 600px; }
  .phone-device { width: 286px; height: 548px; right: -2px; padding-top: 25px; }
  .phone-device-score { width: 173px; height: 173px; margin-top: 18px; margin-bottom: 16px; }.phone-device-score b { font-size: 56px; }
  .phone-metric { min-height: 97px; padding: 12px; }.phone-metric-icon { width: 35px; height: 35px; }.phone-metric-icon svg { width: 34px; height: 34px; }.phone-metric b { font-size: 40px; }.phone-device-nav { flex-basis: 66px; }
}

@media (max-width: 760px) {
  .devices-visual { min-height: 610px; }
  .phone-device { width: 300px; height: 575px; right: 0; }
}

@media (max-width: 430px) {
  .devices-visual { min-height: 466px; }
  .phone-device { width: 232px; height: 445px; right: 0; padding: 20px 8px 0; }
  .phone-skeleton-bars { gap: 10px; }.phone-skeleton-bars i { height: 12px; }.phone-skeleton-bars .is-secondary { height: 8px; }
  .phone-device-score { width: 140px; height: 140px; margin: 14px auto 13px; }.phone-score-track, .phone-score-track i { border-width: 7px; }.phone-score-track i { inset: -7px; }.phone-device-score b { font-size: 46px; }.phone-score-line { width: 55px; height: 9px; margin-top: 8px; }.phone-device-score em { gap: 5px; margin-top: 9px; }.phone-device-score em i { width: 10px; height: 10px; }.phone-device-score em span { width: 42px; height: 12px; }
  .phone-device-metrics { gap: 10px; }.phone-metric { min-height: 79px; padding: 10px; border-radius: 13px; }.phone-metric-icon { width: 29px; height: 29px; }.phone-metric-icon svg { width: 28px; height: 28px; }.phone-metric b { margin-top: 7px; font-size: 33px; }.phone-metric-line { height: 10px; margin-top: 7px; }
  .phone-device-nav { flex-basis: 53px; margin: 16px -8px 0; padding: 6px 8px 7px; }.phone-nav-item { gap: 5px; }.phone-nav-item svg { width: 23px; height: 23px; }.phone-nav-item > span { width: 42px; height: 7px; }
}

/* A ilustração é a própria tela mobile, como na referência. */
.devices-visual { display: grid; min-height: 620px; place-items: center; }
.devices-visual::before, .desktop-device, .network-link, .network-tag { display: none; }
.phone-device { position: relative; right: auto; bottom: auto; width: 320px; height: 612px; padding: 29px 10px 0; }
.phone-device { overflow: visible; }
.phone-device-score { width: 195px; height: 195px; margin-top: 21px; margin-bottom: 16px; }
.phone-device-score > div { transform: translateY(10px); }
.phone-device-nav { margin-top: 18px; }

@media (max-width: 760px) {
  .devices-visual { min-height: 590px; }
  .phone-device { width: 300px; height: 575px; }
}

@media (max-width: 430px) {
  .devices-visual { min-height: 462px; }
  .phone-device { width: 232px; height: 445px; padding-top: 20px; }
  .phone-device-score > div { transform: translateY(7px); }
}

/* Detalhes finais da composição: arco, pontos e navegação visível. */
.phone-score-track { border: 0; background: conic-gradient(from 0deg, var(--blue) 0 32%, #e6efff 32% 100%); transform: none; }
.phone-score-track::after { position: absolute; inset: 9px; border-radius: 50%; background: #fff; content: ''; }
.phone-score-track i { display: none; }
.phone-device-score::after { position: absolute; z-index: 1; inset: 0; border-radius: 50%; background: radial-gradient(circle at 20% 37%, #bfd5ff 0 3px, transparent 4px), radial-gradient(circle at 79% 37%, #bfd5ff 0 3px, transparent 4px), radial-gradient(circle at 81% 71%, #bfd5ff 0 3px, transparent 4px), radial-gradient(circle at 20% 71%, #bfd5ff 0 3px, transparent 4px); content: ''; pointer-events: none; }
.phone-device-score > div { z-index: 2; }
.phone-device-score em i { background: #ff4d51; }.phone-device-score em span { background: #ffd0d1; }
.phone-metric { min-height: 102px; }
.phone-device-nav { height: 74px; flex-basis: 74px; box-sizing: border-box; margin-top: 16px; }
.phone-metric b { color: var(--blue) !important; }
.phone-metric-line { background: #d9deea !important; }
.phone-nav-item > span { display: block !important; flex: 0 0 auto; visibility: visible !important; opacity: 1 !important; background: #d3dbe9 !important; }
.phone-nav-item.is-active > span { background: var(--blue) !important; }
.phone-nav-item::after { display: block !important; width: 55px; height: 10px; margin: 0; border-radius: 99px; background: #d3dbe9; content: ''; }
.phone-nav-item.is-active::after { width: 55px; height: 10px; background: var(--blue); }
.phone-nav-item > span { display: none !important; }

@media (max-width: 430px) {
  .phone-score-track::after { inset: 7px; }
  .phone-device-score::after { background: radial-gradient(circle at 20% 37%, #bfd5ff 0 2px, transparent 3px), radial-gradient(circle at 79% 37%, #bfd5ff 0 2px, transparent 3px), radial-gradient(circle at 81% 71%, #bfd5ff 0 2px, transparent 3px), radial-gradient(circle at 20% 71%, #bfd5ff 0 2px, transparent 3px); }
  .phone-metric { min-height: 76px; }
  .phone-device-nav { height: 53px; flex-basis: 53px; margin-top: 13px; }
  .phone-nav-item::after, .phone-nav-item.is-active::after { width: 42px; height: 7px; }
}

/* Regras isoladas: evitam que prévias antigas alterem a tela mobile. */
.devices-visual .phone-device { position: relative; display: flex; flex-direction: column; width: 320px; height: 612px; min-height: 0; padding: 29px 10px 0; overflow: visible; box-sizing: border-box; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.devices-visual .phone-skeleton-bars { display: grid; justify-items: center; gap: 13px; }.devices-visual .phone-skeleton-bars i { display: block; height: 16px; border-radius: 99px; }.devices-visual .phone-skeleton-bars .is-primary { width: 46%; background: var(--blue); }.devices-visual .phone-skeleton-bars .is-secondary { width: 76%; height: 11px; background: #d9deea; }
.devices-visual .phone-device-score { position: relative; display: grid; width: 195px; height: 195px; place-items: center; margin: 21px auto 16px; }.devices-visual .phone-score-track { position: absolute; inset: 0; border: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--blue) 0 32%, #e6efff 32% 100%); transform: none; }.devices-visual .phone-score-track::after { position: absolute; inset: 9px; border-radius: 50%; background: #fff; content: ''; }.devices-visual .phone-score-track i { display: none; }.devices-visual .phone-device-score::after { position: absolute; z-index: 1; inset: 0; border-radius: 50%; background: radial-gradient(circle at 20% 37%, #bfd5ff 0 3px, transparent 4px), radial-gradient(circle at 79% 37%, #bfd5ff 0 3px, transparent 4px), radial-gradient(circle at 81% 71%, #bfd5ff 0 3px, transparent 4px), radial-gradient(circle at 20% 71%, #bfd5ff 0 3px, transparent 4px); content: ''; }.devices-visual .phone-device-score > div { position: relative; z-index: 2; text-align: center; transform: translateY(10px); }.devices-visual .phone-device-score b { display: block; color: var(--blue); font-size: 62px; letter-spacing: -.11em; line-height: .95; }.devices-visual .phone-score-line { display: block; width: 75px; height: 12px; margin: 12px auto 0; border-radius: 99px; background: #d9deea; }.devices-visual .phone-device-score em { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; }.devices-visual .phone-device-score em i { width: 14px; height: 14px; margin: 0; border-radius: 50%; background: #ff4d51; }.devices-visual .phone-device-score em span { display: block; width: 57px; height: 16px; border-radius: 99px; background: #ffd0d1; }
.devices-visual .phone-device-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.devices-visual .phone-metric { min-width: 0; min-height: 102px; padding: 14px; box-sizing: border-box; border: 2px solid #deebff; border-radius: 16px; background: #fff; }.devices-visual .phone-metric-icon { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--blue); background: transparent; }.devices-visual .phone-metric-icon svg, .devices-visual .phone-nav-item svg { display: block; width: 39px; height: 39px; fill: none !important; stroke: currentColor !important; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.devices-visual .phone-metric-red .phone-metric-icon { color: var(--red); }.devices-visual .phone-metric-orange .phone-metric-icon { color: var(--orange); }.devices-visual .phone-metric-green .phone-metric-icon { color: var(--green); }.devices-visual .phone-metric b { display: block; margin-top: 11px; color: var(--blue) !important; font-size: 45px; letter-spacing: -.08em; line-height: 1; }.devices-visual .phone-metric-line { display: block; width: 62%; height: 13px; margin-top: 11px; border-radius: 99px; background: #d9deea !important; }
.devices-visual .phone-device-nav { display: grid; grid-template-columns: repeat(4, 1fr); flex: 0 0 74px; height: 74px; align-items: start; margin: 16px -10px 0; padding: 9px 12px 10px; box-sizing: border-box; border-top: 2px solid #e1e9f6; background: #fff; }.devices-visual .phone-nav-item { display: flex; align-items: center; flex-direction: column; gap: 8px; color: #9ba8be; }.devices-visual .phone-nav-item svg { width: 31px; height: 31px; }.devices-visual .phone-nav-item::after { display: block !important; width: 55px; height: 10px; margin: 0; border-radius: 99px; background: #d3dbe9; content: ''; }.devices-visual .phone-nav-item.is-active { color: var(--blue); }.devices-visual .phone-nav-item.is-active::after { width: 55px; height: 10px; background: var(--blue); }

@media (max-width: 430px) {
  .devices-visual .phone-device { width: 232px; height: 445px; padding-top: 20px; }.devices-visual .phone-skeleton-bars { gap: 10px; }.devices-visual .phone-skeleton-bars i { height: 12px; }.devices-visual .phone-skeleton-bars .is-secondary { height: 8px; }.devices-visual .phone-device-score { width: 140px; height: 140px; margin: 14px auto 13px; }.devices-visual .phone-score-track::after { inset: 7px; }.devices-visual .phone-device-score::after { background: radial-gradient(circle at 20% 37%, #bfd5ff 0 2px, transparent 3px), radial-gradient(circle at 79% 37%, #bfd5ff 0 2px, transparent 3px), radial-gradient(circle at 81% 71%, #bfd5ff 0 2px, transparent 3px), radial-gradient(circle at 20% 71%, #bfd5ff 0 2px, transparent 3px); }.devices-visual .phone-device-score > div { transform: translateY(7px); }.devices-visual .phone-device-score b { font-size: 46px; }.devices-visual .phone-score-line { width: 55px; height: 9px; margin-top: 8px; }.devices-visual .phone-device-score em { gap: 5px; margin-top: 9px; }.devices-visual .phone-device-score em i { width: 10px; height: 10px; }.devices-visual .phone-device-score em span { width: 42px; height: 12px; }.devices-visual .phone-device-metrics { gap: 10px; }.devices-visual .phone-metric { min-height: 76px; padding: 10px; border-radius: 13px; }.devices-visual .phone-metric-icon { width: 29px; height: 29px; }.devices-visual .phone-metric-icon svg { width: 28px; height: 28px; }.devices-visual .phone-metric b { margin-top: 7px; font-size: 33px; }.devices-visual .phone-metric-line { height: 10px; margin-top: 7px; }.devices-visual .phone-device-nav { flex-basis: 53px; height: 53px; margin: 13px -8px 0; padding: 6px 8px 7px; }.devices-visual .phone-nav-item { gap: 5px; }.devices-visual .phone-nav-item svg { width: 23px; height: 23px; }.devices-visual .phone-nav-item::after, .devices-visual .phone-nav-item.is-active::after { width: 42px; height: 7px; }
}

/* A prévia une desktop e mobile: a tela móvel fica íntegra, sem esconder o Windows. */
#dispositivos { scroll-margin-top: 104px; }
.devices-visual .desktop-device { display: block; position: absolute; z-index: 1; top: 220px; left: 0; width: 285px; transform: none; }
.devices-visual .phone-device { z-index: 2; transform: translateX(82px); }

@media (max-width: 980px) {
  .devices-visual .desktop-device { width: 245px; left: 0; top: 235px; }
  .devices-visual .phone-device { transform: translateX(55px); }
}

@media (max-width: 760px) {
  .devices-visual { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 22px; min-height: 990px; }
  .devices-visual .desktop-device { display: block; position: relative; top: auto; left: auto; width: min(410px, calc(100vw - 32px)); margin: 0; transform: none; order: 1; }
  .devices-visual .phone-device { position: relative; grid-column: auto; transform: scale(.78); transform-origin: center top; order: 2; }
}

/* O celular também tem uma superfície própria para não se fundir ao fundo do site. */
.devices-visual .phone-device { border: 1px solid #dfe7f5; border-radius: 26px; background: #fff; box-shadow: 0 18px 36px rgba(37, 69, 141, .12); }

/* Prévia desktop redesenhada: navegação lateral e conteúdo em painéis largos. */
.devices-visual .desktop-device { display: flex; width: 410px; height: 420px; min-height: 420px; padding: 0; overflow: hidden; box-sizing: border-box; }
.devices-visual .desktop-sidebar { display: flex; width: 82px; flex: 0 0 82px; flex-direction: column; padding: 24px 12px 20px; box-sizing: border-box; border-right: 1px solid #edf1f8; background: #fff; }
.devices-visual .desktop-sidebar-brand { display: flex; align-items: center; gap: 9px; padding: 0 5px; }
.devices-visual .desktop-sidebar-brand img { width: 28px; height: 28px; }
.devices-visual .desktop-sidebar-brand span, .devices-visual .desktop-placeholder { display: block; height: 10px; border-radius: 99px; background: #d2d9e7; }
.devices-visual .desktop-sidebar-brand span { width: 39px; height: 9px; background: #153aa9; }
.devices-visual .desktop-sidebar-nav { display: grid; gap: 10px; margin-top: 28px; }
.devices-visual .desktop-sidebar-nav > div { display: flex; align-items: center; gap: 8px; height: 35px; padding: 0 8px; border-radius: 10px; color: #8290ab; }
.devices-visual .desktop-sidebar-nav > div.is-active { color: var(--blue); background: #edf2ff; }
.devices-visual .desktop-sidebar-nav svg, .devices-visual .desktop-sidebar-lock svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.devices-visual .desktop-sidebar-nav span { width: 28px; height: 8px; border-radius: 99px; background: #d2d9e7; }
.devices-visual .desktop-sidebar-nav .is-active span { background: #b7c9ff; }
.devices-visual .desktop-sidebar-lock { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 7px; color: #1641b3; border: 1px solid #8fb2ff; border-radius: 11px; }
.devices-visual .desktop-sidebar-lock span { width: 31px; height: 8px; border-radius: 99px; background: #c8d1e2; }
.devices-visual .desktop-main { min-width: 0; flex: 1; padding: 23px 16px 16px; background: #f5f8ff; }
.devices-visual .desktop-main-top { display: flex; align-items: center; justify-content: space-between; height: 25px; }
.devices-visual .desktop-main-top > span { width: 164px; height: 13px; border-radius: 99px; background: #173eb1; }
.devices-visual .desktop-main-top > div { display: flex; align-items: center; gap: 7px; color: #7183a6; }
.devices-visual .desktop-main-top i { font-size: 21px; font-style: normal; line-height: 1; }.devices-visual .desktop-main-top b { display: block; width: 75px; height: 11px; border-radius: 99px; background: #cbd3e2; }
.devices-visual .desktop-main-grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 10px; margin-top: 15px; }
.devices-visual .desktop-overview-card, .devices-visual .desktop-summary-card, .devices-visual .desktop-accounts-card { border: 1px solid #d8e5fb; border-radius: 13px; background: #fff; }
.devices-visual .desktop-overview-card { display: flex; min-height: 225px; flex-direction: column; padding: 14px 13px 12px; box-sizing: border-box; }.devices-visual .desktop-placeholder-title { width: 112px; height: 12px; }
.devices-visual .desktop-score-big { position: relative; display: grid; width: 145px; height: 145px; place-items: center; margin: 15px auto 0; }.devices-visual .desktop-score-track { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--blue) 0 32%, #e7effd 32% 100%); }.devices-visual .desktop-score-track::after { position: absolute; inset: 7px; border-radius: 50%; background: #fff; content: ''; }.devices-visual .desktop-score-big > div { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; }.devices-visual .desktop-score-big b { color: var(--blue); font-size: 42px; letter-spacing: -.1em; line-height: 1; }.devices-visual .desktop-score-big > div > span { width: 57px; height: 9px; margin-top: 8px; border-radius: 99px; background: #d2d9e7; }.devices-visual .desktop-score-big em { display: flex; align-items: center; gap: 5px; margin-top: 10px; }.devices-visual .desktop-score-big em i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d51; }.devices-visual .desktop-score-big em b { width: 42px; height: 11px; border-radius: 99px; background: #ffd0d1; }.devices-visual .desktop-placeholder-bottom { width: 145px; height: 10px; margin: auto auto 0; }
.devices-visual .desktop-summary-card { padding: 14px 12px 5px; box-sizing: border-box; }.devices-visual .desktop-summary-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) 20px 10px; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid #e5ecf7; }.devices-visual .desktop-summary-row:last-child { border-bottom: 0; }.devices-visual .desktop-summary-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #fff0f0; }.devices-visual .desktop-summary-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.devices-visual .desktop-summary-row .desktop-placeholder { width: 100%; height: 10px; }.devices-visual .desktop-summary-row > b { color: #143ca9; font-size: 23px; letter-spacing: -.08em; }.devices-visual .desktop-summary-row > i { color: #7e8eac; font-size: 21px; font-style: normal; }.devices-visual .row-red .desktop-summary-icon { color: #ff4d51; }.devices-visual .row-orange .desktop-summary-icon { color: var(--orange); background: #fff5e9; }.devices-visual .row-blue .desktop-summary-icon { color: var(--blue); background: #edf2ff; }.devices-visual .row-green .desktop-summary-icon { color: var(--green); background: #ecfaf1; }
.devices-visual .desktop-accounts-card { margin-top: 12px; padding: 13px 12px 4px; }.devices-visual .desktop-account-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) 10px; grid-template-rows: 25px 12px; align-items: center; column-gap: 9px; min-height: 44px; border-bottom: 1px solid #e5ecf7; }.devices-visual .desktop-account-row:last-child { border-bottom: 0; }.devices-visual .desktop-account-icon { grid-row: 1 / 3; display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: var(--blue); background: #eaf1ff; }.devices-visual .desktop-account-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.devices-visual .desktop-account-row > .desktop-placeholder { width: 75%; height: 9px; }.devices-visual .desktop-account-row .desktop-account-sub { grid-column: 2; width: 42%; height: 7px; }.devices-visual .desktop-account-row > i { grid-column: 3; grid-row: 1 / 3; color: #7e8eac; font-size: 20px; font-style: normal; }

@media (max-width: 760px) {
  .devices-visual .desktop-device { width: min(410px, calc(100vw - 32px)); height: 420px; min-height: 420px; transform: none; }
}

/* Proporção de janela desktop: mais largura, menos altura e conteúdo compacto. */
.devices-visual .desktop-device { height: 250px; min-height: 250px; }
.devices-visual .desktop-sidebar { padding: 16px 12px 12px; }
.devices-visual .desktop-sidebar-brand img { width: 24px; height: 24px; }.devices-visual .desktop-sidebar-brand span { width: 34px; height: 7px; }
.devices-visual .desktop-sidebar-nav { gap: 6px; margin-top: 17px; }.devices-visual .desktop-sidebar-nav > div { height: 25px; gap: 6px; padding: 0 6px; }.devices-visual .desktop-sidebar-nav svg, .devices-visual .desktop-sidebar-lock svg { width: 15px; height: 15px; }.devices-visual .desktop-sidebar-nav span { width: 25px; height: 6px; }
.devices-visual .desktop-sidebar-lock { gap: 6px; padding: 6px 5px; }.devices-visual .desktop-sidebar-lock span { width: 27px; height: 6px; }
.devices-visual .desktop-main { padding: 13px 13px 10px; }.devices-visual .desktop-main-top { height: 16px; }.devices-visual .desktop-main-top > span { width: 160px; height: 9px; }.devices-visual .desktop-main-top i { font-size: 17px; }.devices-visual .desktop-main-top b { width: 66px; height: 8px; }
.devices-visual .desktop-main-grid { gap: 8px; margin-top: 6px; }.devices-visual .desktop-overview-card { min-height: 112px; padding: 9px 10px 8px; }.devices-visual .desktop-placeholder-title { width: 93px; height: 8px; }.devices-visual .desktop-score-big { width: 78px; height: 78px; margin-top: 8px; }.devices-visual .desktop-score-track::after { inset: 5px; }.devices-visual .desktop-score-big b { font-size: 27px; }.devices-visual .desktop-score-big > div > span { width: 43px; height: 7px; margin-top: 5px; }.devices-visual .desktop-score-big em { gap: 4px; margin-top: 6px; }.devices-visual .desktop-score-big em i { width: 6px; height: 6px; }.devices-visual .desktop-score-big em b { width: 31px; height: 8px; }.devices-visual .desktop-placeholder-bottom { width: 105px; height: 7px; }
.devices-visual .desktop-summary-card { padding: 8px 9px 2px; }.devices-visual .desktop-summary-row { grid-template-columns: 24px minmax(0, 1fr) 15px 7px; gap: 5px; min-height: 25px; }.devices-visual .desktop-summary-icon { width: 24px; height: 24px; border-radius: 7px; }.devices-visual .desktop-summary-icon svg { width: 15px; height: 15px; }.devices-visual .desktop-summary-row .desktop-placeholder { height: 7px; }.devices-visual .desktop-summary-row > b { font-size: 18px; }.devices-visual .desktop-summary-row > i { font-size: 16px; }
.devices-visual .desktop-accounts-card { margin-top: 5px; padding: 6px 9px 2px; }.devices-visual .desktop-account-row { grid-template-rows: 14px 7px; min-height: 20px; column-gap: 6px; }.devices-visual .desktop-account-icon { width: 22px; height: 22px; }.devices-visual .desktop-account-icon svg { width: 14px; height: 14px; }.devices-visual .desktop-account-row > .desktop-placeholder { height: 7px; }.devices-visual .desktop-account-row .desktop-account-sub { height: 5px; }.devices-visual .desktop-account-row > i { font-size: 15px; }

@media (max-width: 760px) {
  .devices-visual .desktop-device { height: 250px; min-height: 250px; }
}

/* Celular principal inspirado na referência: hardware leve e cofre protegido. */
.hero-visual .visual-glow { width: 540px; height: 540px; background: radial-gradient(circle, rgba(207,225,255,.82) 0%, rgba(235,242,255,.46) 54%, transparent 72%); }
.hero-phone { position: relative; z-index: 1; width: 318px; height: 568px; padding: 8px; box-sizing: border-box; border: 1px solid #aabbd3; border-radius: 48px; background: linear-gradient(112deg, #98abc5 0%, #f9fcff 9%, #dfe8f4 43%, #fff 73%, #9cafca 100%); box-shadow: 0 34px 64px rgba(45,79,144,.22), 0 8px 18px rgba(61,92,150,.12); transform: rotate(2.2deg); }
.hero-phone::before { position: absolute; top: 88px; left: -5px; width: 4px; height: 31px; border-radius: 4px 0 0 4px; background: linear-gradient(#cdd8e7,#8fa2bd,#dce5f0); box-shadow: 0 47px 0 #aebdd1, 0 91px 0 #aebdd1; content: ''; }
.hero-phone::after { position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.9); border-radius: 44px; content: ''; pointer-events: none; }
.hero-phone-screen { position: relative; height: 100%; overflow: hidden; box-sizing: border-box; padding: 47px 22px 21px; border: 1px solid #cbd7e8; border-radius: 40px; background: linear-gradient(155deg,#fbfdff 0%,#f5f9ff 45%,#fff 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.82); }
.hero-phone-screen::before { position: absolute; top: -95px; right: -115px; width: 310px; height: 310px; border-radius: 50%; background: radial-gradient(circle,rgba(220,234,255,.62),rgba(244,248,255,.1) 67%,transparent 68%); content: ''; pointer-events: none; }
.hero-phone-notch { position: absolute; z-index: 2; top: -1px; left: 50%; width: 116px; height: 25px; border: 1px solid #d7e0ed; border-top: 0; border-radius: 0 0 16px 16px; background: #fff; transform: translateX(-50%); }
.hero-phone-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 5px; color: #7183a2; }.hero-phone-top svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }.hero-phone-top > i { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: 0 5px 12px rgba(52,123,255,.28); }
.hero-vault-ring { position: relative; display: grid; width: 190px; height: 190px; place-items: center; margin: 32px auto 24px; }.hero-vault-track { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -18deg,var(--blue) 0 30%,#e8eff9 30% 58%,var(--blue) 58% 78%,#e8eff9 78% 100%); box-shadow: 0 0 0 1px #dce7f7; }.hero-vault-track::after { position: absolute; inset: 11px; border-radius: 50%; background: rgba(251,253,255,.96); content: ''; }.hero-vault-shield { position: relative; z-index: 1; display: grid; width: 68px; height: 68px; place-items: center; border-radius: 23px; background: #edf3ff; box-shadow: 0 9px 22px rgba(52,123,255,.12); }.hero-vault-shield::before { position: absolute; inset: 9px 11px 10px; border-radius: 15px 15px 20px 20px; background: linear-gradient(145deg,#4088ff,#2468ee); content: ''; clip-path: polygon(50% 0,100% 18%,94% 65%,75% 88%,50% 100%,25% 88%,6% 65%,0 18%); }.hero-vault-shield svg { position: relative; z-index: 1; width: 35px; height: 35px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }.hero-vault-status { position: absolute; z-index: 2; bottom: 19px; width: 11px; height: 11px; border-radius: 50%; background: #41c982; box-shadow: 0 0 0 5px rgba(65,201,130,.08); }
.hero-credential-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.hero-credential-mini, .hero-credential-row { border: 1px solid #dfe7f3; background: rgba(255,255,255,.94); box-shadow: 0 10px 22px rgba(42,71,132,.045); }.hero-credential-mini { min-height: 91px; padding: 14px; box-sizing: border-box; border-radius: 15px; }.hero-credential-icon { display: block; width: 27px; height: 25px; border-radius: 7px; }.hero-credential-mini > b, .hero-credential-mini > i, .hero-credential-row div > b, .hero-credential-row div > i { display: block; border-radius: 99px; }.hero-credential-mini > b { width: 58px; height: 7px; margin-top: 12px; background: var(--blue); }.hero-credential-mini > i { width: 72px; height: 7px; margin-top: 8px; background: #dce3ee; }.icon-blue-soft { background: linear-gradient(145deg,#d6e7ff,#eef4ff); }.icon-green-soft { position: relative; display: grid; place-items: center; border-radius: 50%; background: #b9f1d2; }.icon-green-soft i { width: 5px; height: 5px; border-radius: 50%; background: #52c98a; }
.hero-credential-row { display: flex; min-height: 67px; align-items: center; gap: 15px; margin-top: 12px; padding: 12px 15px; box-sizing: border-box; border-radius: 15px; }.hero-row-icon { display: flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; gap: 3px; border-radius: 11px; background: #edf3ff; }.hero-row-icon > i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }.hero-credential-row > div { min-width: 0; flex: 1; }.hero-credential-row div > b { width: 72%; height: 8px; background: var(--blue); }.hero-credential-row div > i { width: 94%; height: 7px; margin-top: 8px; background: #dce3ee; }.hero-row-lock svg { width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

@media (max-width: 1100px) and (min-width: 761px) { .hero-phone { transform: rotate(2.2deg) scale(.91); } }
@media (max-width: 760px) { .hero-visual { min-height: 555px; }.hero-phone { transform: rotate(1.5deg) scale(.88); } }
@media (max-width: 430px) { .hero-visual { min-height: 500px; }.hero-phone { transform: rotate(1.2deg) scale(.78); } }

/* Mantém o desenho apenas na espessura do anel, sem setores visíveis no centro. */
.hero-vault-track { -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 11px),#000 0); mask: radial-gradient(farthest-side,transparent calc(100% - 11px),#000 0); }
.hero-vault-track::after { display: none; }

/* Escala proporcional da referência: evita que o flex comprima o score e o deforme. */
.devices-visual .phone-skeleton-bars { flex: 0 0 auto; gap: 10px; }
.devices-visual .phone-skeleton-bars i { height: 12px; }
.devices-visual .phone-skeleton-bars .is-secondary { height: 8px; }
.devices-visual .phone-device-score { flex: 0 0 195px; width: 195px; height: 195px; }
.devices-visual .phone-score-particles { position: absolute; z-index: 1; inset: 0; display: block; overflow: hidden; border-radius: 50%; pointer-events: none; }
.devices-visual .phone-score-particles i { position: absolute; display: block; width: 7px; height: 7px; border-radius: 50%; background: #bfd5ff; opacity: 0; animation: phone-score-particle-rise 3.6s ease-in-out infinite; }
.devices-visual .phone-score-particles .particle-one { left: 18%; top: 68%; animation-delay: -.2s; }
.devices-visual .phone-score-particles .particle-two { left: 76%; top: 71%; animation-delay: -1.4s; }
.devices-visual .phone-score-particles .particle-three { left: 78%; top: 36%; width: 6px; height: 6px; animation-delay: -2.6s; }
.devices-visual .phone-score-particles .particle-four { left: 20%; top: 36%; width: 6px; height: 6px; animation-delay: -3.1s; }
@keyframes phone-score-particle-rise { 0% { opacity: 0; transform: translateY(18px) scale(.35); } 18% { opacity: .9; transform: translateY(7px) scale(.75); } 58% { opacity: .72; transform: translateY(-8px) scale(1); } 100% { opacity: 0; transform: translateY(-34px) scale(.55); } }
.devices-visual .phone-device-score::after { display: none; }
.devices-visual .phone-score-line { width: 57px; height: 9px; margin-top: 9px; }
.devices-visual .phone-device-score em { gap: 5px; margin-top: 10px; }
.devices-visual .phone-device-score em i { width: 10px; height: 10px; }
.devices-visual .phone-device-score em span { width: 43px; height: 12px; }
.devices-visual .phone-device-metrics { flex: 0 0 auto; gap: 10px; }
.devices-visual .phone-metric { min-height: 112px; padding: 10px; border-radius: 14px; }
.devices-visual .phone-metric-icon { width: 30px; height: 30px; }
.devices-visual .phone-metric-icon svg { width: 29px; height: 29px; }
.devices-visual .phone-metric b { margin-top: 7px; font-size: 34px; }
.devices-visual .phone-metric-line { height: 10px; margin-top: 7px; }
.devices-visual .phone-device-nav { flex: 0 0 62px; height: 62px; margin-top: 16px; padding: 7px 10px 8px; }
.devices-visual .phone-nav-item { gap: 5px; }
.devices-visual .phone-nav-item svg { width: 25px; height: 25px; }
.devices-visual .phone-nav-item::after, .devices-visual .phone-nav-item.is-active::after { width: 44px; height: 8px; }

/* Os dois dispositivos são independentes e mantêm suas proporções reais. */
.devices-visual { display: grid; grid-template-columns: 285px 205px; align-items: end; justify-content: center; column-gap: 15px; min-height: 620px; }
.devices-visual .desktop-device { position: relative; grid-column: 1; top: auto; left: auto; align-self: end; width: 285px; margin-bottom: 80px; }
.devices-visual .phone-device { grid-column: 2; justify-self: center; transform: scale(.64); transform-origin: center bottom; }

/* O desktop tem sua própria janela horizontal; o mobile permanece flat. */
.devices-visual .desktop-device { width: 410px; border: 1px solid #dfe7f5; border-radius: 18px; background: #fff; box-shadow: 0 20px 47px rgba(37, 69, 141, .12); transform: scale(.695); transform-origin: center bottom; }
.devices-visual .desktop-bar { border-bottom-color: #e7edf7; background: #fbfcff; }

@media (max-width: 980px) and (min-width: 761px) {
  .devices-visual { grid-template-columns: 230px 185px; column-gap: 10px; }
  .devices-visual .desktop-device { width: 410px; margin-bottom: 92px; transform: scale(.56); }
  .devices-visual .phone-device { transform: scale(.57); }
}

/* A seção de dispositivos apresenta apenas a prévia horizontal do Windows. */
.devices-visual { display: flex; min-height: 510px; align-items: center; justify-content: flex-start; }
.devices-visual .phone-device, .devices-visual .network-link, .devices-visual .network-tag { display: none; }
.devices-visual .desktop-device { position: relative; width: 410px; height: 250px; min-height: 250px; margin: 0 0 0 22px; transform: scale(1.04); transform-origin: left center; }
@media (max-width: 760px) {
  .devices-visual { min-height: 390px; }
  .devices-visual .desktop-device { width: min(410px, calc(100vw - 32px)); height: 250px; min-height: 250px; margin-left: 0; transform: scale(.82); transform-origin: center; }
}

/* Hero: uma senha fica forte e segue para o cofre. */
.hero-visual { min-height: 570px; overflow: visible; }
.hero-visual .visual-glow { width: 510px; height: 510px; opacity: .62; background: radial-gradient(circle,rgba(226,237,255,.8) 0%,rgba(245,249,255,.45) 52%,transparent 73%); }
.hero-password-flow { position: relative; z-index: 1; width: 520px; height: 500px; color: var(--navy); }
.flow-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #d7e5fb; stroke-width: 1.5; stroke-dasharray: 5 8; opacity: 0; animation: flow-path-cycle 9s ease-in-out infinite; }
.flow-password-field { position: absolute; top: 94px; left: 48px; display: flex; width: 275px; height: 62px; align-items: center; gap: 15px; padding: 0 20px; box-sizing: border-box; border: 1px solid #dce7f7; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(29,66,139,.08); opacity: 0; animation: flow-element-in 9s ease-in-out infinite; }
.flow-field-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 10px; color: var(--blue); background: #edf3ff; }
.flow-field-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.flow-password-dots { display: flex; min-width: 0; align-items: center; gap: 8px; }
.flow-password-dots i { display: block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #8695b2; transform-origin: center; animation: flow-dot-strength 9s ease-in-out infinite; }
.flow-password-dots i:nth-child(n+6) { opacity: 0; transform: scale(.2); }
.flow-password-dots i:nth-child(6) { animation-delay: .04s; }.flow-password-dots i:nth-child(7) { animation-delay: .08s; }.flow-password-dots i:nth-child(8) { animation-delay: .12s; }.flow-password-dots i:nth-child(9) { animation-delay: .16s; }.flow-password-dots i:nth-child(10) { animation-delay: .2s; }
.flow-strength { position: absolute; top: 188px; left: 68px; display: grid; width: 320px; grid-template-columns: repeat(5,1fr); gap: 7px; opacity: 0; animation: flow-element-in 9s .12s ease-in-out infinite; }
.flow-strength-segment { height: 9px; border-radius: 99px; background: #e6ebf3; box-shadow: inset 0 0 0 1px rgba(18,50,112,.025); animation: flow-segment 9s ease-in-out infinite; }
.segment-one { --segment-color:#ff5a61; }.segment-two { --segment-color:#ff7855; animation-delay:.08s; }.segment-three { --segment-color:#ff9a3d; animation-delay:.14s; }.segment-four { --segment-color:#83cc70; animation-delay:.2s; }.segment-five { --segment-color:#36bf7b; animation-delay:.26s; }
.flow-strength-handle { position: absolute; top: -7px; left: 4px; width: 23px; height: 23px; border: 5px solid #fff; border-radius: 50%; background: #ff5a61; box-shadow: 0 4px 13px rgba(22,55,120,.18); animation: flow-handle-drag 9s cubic-bezier(.45,0,.2,1) infinite; }
.flow-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #48c98a; opacity: 0; animation: flow-spark-rise 9s ease-out infinite; }.spark-one { right: 4px; top: -22px; }.spark-two { right: 22px; top: -12px; animation-delay:.16s; }.spark-three { right: 11px; top: 15px; width: 4px; height: 4px; animation-delay:.28s; }
.flow-use-button { position: absolute; top: 286px; left: 93px; display: flex; width: 174px; height: 54px; align-items: center; justify-content: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#286eff,#1854dc); box-shadow: 0 15px 28px rgba(40,110,255,.22); font-size: 16px; font-weight: 700; letter-spacing: -.01em; opacity: 0; animation: flow-button-cycle 9s ease-in-out infinite; }
.flow-vault { position: absolute; top: 266px; left: 388px; display: grid; width: 88px; height: 96px; place-items: center; border-radius: 34px; color: var(--blue); background: rgba(238,244,255,.88); opacity: 0; animation: flow-vault-cycle 9s ease-in-out infinite; }
.flow-vault svg { width: 56px; height: 64px; overflow: visible; fill: #2c72f4; stroke: none; filter: drop-shadow(0 8px 10px rgba(38,103,229,.15)); }.flow-vault-check { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.flow-password-token { position: absolute; z-index: 4; top: 303px; left: 142px; display: flex; width: 76px; height: 24px; align-items: center; justify-content: center; gap: 5px; border-radius: 99px; background: #fff; box-shadow: 0 8px 18px rgba(34,70,141,.15); opacity: 0; animation: flow-token-store 9s cubic-bezier(.38,.02,.2,1) infinite; }.flow-password-token i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.flow-confirm { position: absolute; top: 370px; left: 394px; display: flex; align-items: center; gap: 7px; color: #24a966; font-size: 14px; font-weight: 700; opacity: 0; animation: flow-confirm-cycle 9s ease-in-out infinite; }.flow-confirm b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; background: #35c77c; font-size: 12px; }
.flow-cursor { position: absolute; z-index: 8; top: 205px; left: -24px; width: 28px; height: 34px; overflow: visible; fill: #112755; stroke: #fff; stroke-linejoin: round; stroke-width: 1.3; opacity: 0; filter: drop-shadow(0 5px 6px rgba(19,42,88,.18)); animation: flow-cursor-cycle 9s cubic-bezier(.42,0,.22,1) infinite; }

@keyframes flow-element-in { 0%,3%,96%,100% { opacity:0; transform:translateY(14px) scale(.97); } 10%,90% { opacity:1; transform:none; } }
@keyframes flow-path-cycle { 0%,12%,96%,100% { opacity:0; stroke-dashoffset:28; } 22%,88% { opacity:.75; stroke-dashoffset:0; } }
@keyframes flow-dot-strength { 0%,15%,96%,100% { opacity:1; transform:scale(.78); background:#8695b2; } 22% { opacity:1; transform:scale(.82); } 42%,90% { opacity:1; transform:scale(1); background:#536b99; } }
@keyframes flow-segment { 0%,17%,96%,100% { background:#e6ebf3; transform:scaleX(.76); transform-origin:left; } 21% { background:var(--segment-color); transform:scaleX(.86); } 43%,90% { background:var(--segment-color); transform:scaleX(1); } }
@keyframes flow-handle-drag { 0%,18%,96%,100% { left:4px; background:#ff5a61; } 28% { background:#ff9a3d; } 43%,90% { left:293px; background:#36bf7b; } }
@keyframes flow-spark-rise { 0%,35%,96%,100% { opacity:0; transform:translateY(8px) scale(.4); } 42% { opacity:.9; transform:translateY(0) scale(1); } 52% { opacity:0; transform:translateY(-14px) scale(.65); } }
@keyframes flow-button-cycle { 0%,7%,96%,100% { opacity:0; transform:translateY(14px) scale(.97); } 14%,56% { opacity:1; transform:none; } 59% { opacity:1; transform:scale(.94); box-shadow:0 8px 16px rgba(40,110,255,.2); } 63%,90% { opacity:1; transform:none; } }
@keyframes flow-vault-cycle { 0%,9%,96%,100% { opacity:0; transform:translateY(13px) scale(.96); box-shadow:none; } 17%,69% { opacity:1; transform:none; box-shadow:none; } 76%,90% { opacity:1; transform:scale(1.04); box-shadow:0 0 0 10px rgba(53,199,124,.08),0 18px 38px rgba(53,199,124,.13); color:#32b873; } }
@keyframes flow-token-store { 0%,59%,96%,100% { opacity:0; transform:translate(0,0) scale(.72); } 63% { opacity:1; transform:translate(0,0) scale(1); } 74% { opacity:1; transform:translate(267px,-1px) scale(.72); } 78%,90% { opacity:0; transform:translate(267px,-1px) scale(.35); } }
@keyframes flow-confirm-cycle { 0%,74%,96%,100% { opacity:0; transform:translateY(7px); } 80%,90% { opacity:1; transform:none; } }
@keyframes flow-cursor-cycle { 0%,8%,92%,100% { opacity:0; transform:translate(0,24px); } 13% { opacity:1; transform:translate(88px,0); } 18% { opacity:1; transform:translate(92px,-1px); } 43% { opacity:1; transform:translate(378px,-1px); } 51% { opacity:1; transform:translate(220px,99px); } 58% { opacity:1; transform:translate(220px,99px) scale(.88); } 62% { opacity:1; transform:translate(220px,99px) scale(1); } 69% { opacity:0; transform:translate(250px,70px); } }

@media (max-width:1100px) and (min-width:761px) { .hero-password-flow { transform:scale(.88); transform-origin:center; } }
@media (max-width:760px) { .hero-visual { min-height:490px; }.hero-password-flow { transform:scale(.86); transform-origin:center; } }
@media (max-width:520px) { .hero-visual { min-height:410px; }.hero-password-flow { position:absolute; left:50%; transform:translateX(-50%) scale(.7); transform-origin:center; } }
@media (prefers-reduced-motion:reduce) {
  .flow-path,.flow-password-field,.flow-strength,.flow-password-dots i,.flow-strength-segment,.flow-strength-handle,.flow-spark,.flow-use-button,.flow-vault,.flow-password-token,.flow-confirm,.flow-cursor { animation:none !important; }
  .flow-path,.flow-password-field,.flow-strength,.flow-use-button,.flow-vault,.flow-confirm { opacity:1; transform:none; }.flow-password-dots i { opacity:1 !important; transform:none !important; }.flow-strength-segment { background:var(--segment-color); transform:none; }.flow-strength-handle { left:293px; background:#36bf7b; }.flow-spark,.flow-password-token,.flow-cursor { display:none; }.flow-vault { box-shadow:0 0 0 10px rgba(53,199,124,.08); }
}