/* ============================================================
   KeySys: apresentação e conversão
   ============================================================ */

:root {
  --bg:#f5f5f7; --bg-elev:#fff;
  --surface:rgba(255,255,255,.72); --surface-2:rgba(255,255,255,.55);
  --hairline:rgba(0,0,0,.09); --hairline-2:rgba(0,0,0,.05);
  --ink:#11131a; --ink-2:#4b5060; --ink-3:#80869a;
  --brand:#0a6cff; --brand-ink:#0a6cff; --brand-soft:rgba(10,108,255,.10);
  --ok:#009a5b; --ok-soft:rgba(0,154,91,.12);
  --warn:#c2740a; --warn-soft:rgba(194,116,10,.12);
  --danger:#d92d20; --danger-soft:rgba(217,45,32,.12);
  --shadow-s:0 1px 2px rgba(10,14,30,.06), 0 4px 12px rgba(10,14,30,.05);
  --shadow-m:0 2px 6px rgba(10,14,30,.07), 0 14px 36px rgba(10,14,30,.09);
  --shadow-l:0 8px 24px rgba(10,14,30,.10), 0 40px 90px rgba(10,14,30,.16);
  --blur:20px;
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#07080c; --bg-elev:#0e1016;
    --surface:rgba(28,31,42,.62); --surface-2:rgba(38,42,56,.45);
    --hairline:rgba(255,255,255,.10); --hairline-2:rgba(255,255,255,.06);
    --ink:#f2f3f7; --ink-2:#a9afc2; --ink-3:#6f7689;
    --brand:#3f8cff; --brand-ink:#6aa6ff; --brand-soft:rgba(63,140,255,.16);
    --ok:#34d399; --ok-soft:rgba(52,211,153,.14);
    --warn:#fbbf24; --warn-soft:rgba(251,191,36,.14);
    --danger:#f87171; --danger-soft:rgba(248,113,113,.14);
    --shadow-s:0 1px 2px rgba(0,0,0,.5);
    --shadow-m:0 2px 8px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
    --shadow-l:0 10px 30px rgba(0,0,0,.5), 0 50px 100px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --bg:#07080c; --bg-elev:#0e1016;
  --surface:rgba(28,31,42,.62); --surface-2:rgba(38,42,56,.45);
  --hairline:rgba(255,255,255,.10); --hairline-2:rgba(255,255,255,.06);
  --ink:#f2f3f7; --ink-2:#a9afc2; --ink-3:#6f7689;
  --brand:#3f8cff; --brand-ink:#6aa6ff; --brand-soft:rgba(63,140,255,.16);
  --ok:#34d399; --ok-soft:rgba(52,211,153,.14);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.14);
  --danger:#f87171; --danger-soft:rgba(248,113,113,.14);
  --shadow-s:0 1px 2px rgba(0,0,0,.5);
  --shadow-m:0 2px 8px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
  --shadow-l:0 10px 30px rgba(0,0,0,.5), 0 50px 100px rgba(0,0,0,.65);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,sans-serif;
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem); line-height:1.55;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--brand-soft); }

/* Os anéis atrás do celular e do tablet passam da borda de propósito. Sem o corte,
   o celular alarga a página para caber o excesso e ela passa a arrastar de lado. */
main{ overflow-x:hidden; overflow-x:clip; }

.wrap{ width:min(1180px,calc(100% - 2.5rem)); margin-inline:auto; }
@media (max-width:640px){ .wrap{ width:calc(100% - 1.75rem); } }

/* ---------- Tipografia ---------- */
.display{ font-size:clamp(2.4rem,1.2rem + 5.2vw,5rem); line-height:1.03; letter-spacing:-.035em; font-weight:700; margin:0; font-optical-sizing:auto; text-wrap:balance; }
h2.t{ font-size:clamp(1.85rem,1.2rem + 2.4vw,3.1rem); line-height:1.08; letter-spacing:-.028em; font-weight:700; margin:0 0 .6rem; text-wrap:balance; }
/* As quebras fixas dos títulos cabem no celular, menos nestes dois: no cartão final e na
   faixa de tecnologia a linha quebrava antes delas e sobrava uma palavra sozinha. Ali o
   texto corre livre e o balance distribui as linhas. */
@media (max-width:640px){ .tech h2.t br,.cta h2.t br{ display:none; } }
h3.t{ font-size:clamp(1.12rem,1.04rem + .42vw,1.38rem); line-height:1.22; letter-spacing:-.016em; font-weight:650; margin:0 0 .3rem; }
h4.t{ font-size:1rem; line-height:1.3; letter-spacing:-.012em; font-weight:640; margin:0 0 .25rem; }
.lede{ font-size:clamp(1.04rem,1rem + .4vw,1.28rem); line-height:1.5; letter-spacing:-.006em; color:var(--ink-2); margin:0; max-width:62ch; text-wrap:pretty; }
.eyebrow{ font-size:.75rem; font-weight:650; letter-spacing:.075em; text-transform:uppercase; color:var(--brand-ink); margin:0 0 .85rem; }
.muted{ color:var(--ink-2); }
.small{ font-size:.875rem; line-height:1.5; }
.tiny{ font-size:.775rem; line-height:1.45; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- Materiais ---------- */
.material{ background:var(--surface); -webkit-backdrop-filter:blur(var(--blur)) saturate(180%); backdrop-filter:blur(var(--blur)) saturate(180%); border:1px solid var(--hairline); }
.material--thick{ --blur:30px; box-shadow:var(--shadow-l); }

/* ---------- Nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:80; padding:.5rem 0;
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid transparent; transition:border-color .25s ease; }
.nav.is-scrolled{ border-bottom-color:var(--hairline-2); }
.nav__in{ display:flex; align-items:center; gap:1.25rem; height:52px; }
.logo{ display:flex; flex:none; align-items:center; gap:.5rem; font-weight:700; letter-spacing:-.02em; font-size:1.12rem; }
.logo__img{ height:26px; width:auto; flex:none; }
.logo__img--paper{ display:none; }
:root[data-theme="dark"] .logo__img--ink{ display:none; }
:root[data-theme="dark"] .logo__img--paper{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo__img--ink{ display:none; }
  :root:not([data-theme="light"]) .logo__img--paper{ display:block; }
}
.logo b{ color:var(--brand-ink); }
.nav__links{ display:flex; gap:.1rem; margin-left:auto; }
.nav__links a{ padding:.44rem .62rem; border-radius:999px; font-size:.86rem; font-weight:520; color:var(--ink-2); transition:color .18s ease,background .18s ease; }
.nav__links a:hover{ color:var(--ink); background:var(--hairline-2); }
@media (max-width:1080px){ .nav__links{ display:none; } }
.nav__act{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
@media (min-width:1081px){ .nav__act{ margin-left:0; } }

/* ---------- Botões ---------- */
.btn{ --s:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.22rem; border-radius:999px; border:1px solid transparent;
  font-size:.925rem; font-weight:600; letter-spacing:-.01em; cursor:pointer; background:transparent;
  transform:scale(var(--s)); transition:transform .11s cubic-bezier(.3,.7,.4,1),background .18s ease,border-color .18s ease,color .18s ease;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; white-space:nowrap; }
.btn.is-pressed{ --s:.965; }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(10,108,255,.3),0 8px 22px rgba(10,108,255,.28); }
.btn--primary:hover{ background:color-mix(in srgb,var(--brand) 88%,#fff); }
.btn--ghost{ border-color:var(--hairline); color:var(--ink); background:var(--surface-2); }
.btn--ghost:hover{ border-color:color-mix(in srgb,var(--ink) 22%,transparent); }
.btn--sm{ padding:.5rem .95rem; font-size:.85rem; }
.btn--lg{ padding:.92rem 1.6rem; font-size:1rem; }
.btn svg{ width:16px; height:16px; }

.icon-btn{ --s:1; width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--hairline); background:var(--surface-2); color:var(--ink-2);
  cursor:pointer; padding:0; transform:scale(var(--s));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .11s cubic-bezier(.3,.7,.4,1),color .2s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent; }
.icon-btn[hidden]{ display:none; }
.icon-btn:hover{ color:var(--ink); border-color:color-mix(in srgb,var(--ink) 22%,transparent); }
.icon-btn.is-pressed{ --s:.9; }
.icon-btn:focus-visible,.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.icon-btn[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }

.ic-theme{ width:19px; height:19px; overflow:visible; }
.ic-theme__cut{ transition:cx .45s cubic-bezier(.3,.8,.35,1),cy .45s cubic-bezier(.3,.8,.35,1); }
.ic-theme__core{ transition:r .45s cubic-bezier(.3,.8,.35,1); }
.ic-theme__rays{ transform-origin:12px 12px; transition:transform .5s cubic-bezier(.3,.8,.35,1),opacity .3s ease; }
:root[data-theme="dark"] .ic-theme__cut{ cx:17; cy:6.5; }
:root[data-theme="dark"] .ic-theme__core{ r:8.2; }
:root[data-theme="dark"] .ic-theme__rays{ transform:rotate(-45deg) scale(0); opacity:0; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ic-theme__cut{ cx:17; cy:6.5; }
  :root:not([data-theme="light"]) .ic-theme__core{ r:8.2; }
  :root:not([data-theme="light"]) .ic-theme__rays{ transform:rotate(-45deg) scale(0); opacity:0; }
}
:root[data-theme="light"] .ic-theme__cut{ cx:26; cy:4; }
:root[data-theme="light"] .ic-theme__core{ r:5.3; }
:root[data-theme="light"] .ic-theme__rays{ transform:none; opacity:1; }

/* ---------- Seções ---------- */
.sec{ padding:clamp(2.25rem,4.5vw,4rem) 0; position:relative; }
.sec--tight{ padding-top:clamp(2.25rem,4.5vw,4rem); }
.sec__head{ max-width:48rem; margin-bottom:clamp(1.5rem,3vw,2.2rem); }
.sec__head--c{ text-align:center; margin-inline:auto; }
.sec__head--c .lede{ margin-inline:auto; }

.rise{ opacity:1; transform:none; filter:none; }

/* ---------- Hero ---------- */
.hero{ padding:clamp(7rem,13vw,10rem) 0 clamp(3rem,6vw,4.5rem); overflow:hidden; }
/* Herói azul-marinho com a cidade ao fundo, como a capa da apresentação */
.hero{ --ink:#f4f5f9; --ink-2:rgba(244,245,249,.84); --ink-3:rgba(244,245,249,.62); --brand-ink:#7db4ff;
  --hairline:rgba(255,255,255,.2); --hairline-2:rgba(255,255,255,.1); --surface:rgba(8,16,60,.42); --surface-2:rgba(255,255,255,.09);
  position:relative; isolation:isolate; color:var(--ink); background:#020a33 url(assets/bg-city.webp) center/cover no-repeat; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 60%,var(--bg) 100%),
             linear-gradient(90deg,rgba(2,10,51,.88) 0%,rgba(2,10,51,.55) 48%,rgba(2,10,51,.12) 100%); }
.hero::after{ content:""; position:absolute; right:-8%; top:4%; width:min(780px,70%); aspect-ratio:1.4; z-index:-1; pointer-events:none; opacity:.45;
  background:url(assets/wave.webp) center/contain no-repeat; }
.hero__glow{ display:none; }
.hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.08); }
.hero .btn--ghost:hover{ border-color:rgba(255,255,255,.65); }
.hero .display{ color:#fff; }
.hero .panel{ border-color:rgba(255,255,255,.16); }
.hero .material,.hero .pill{ background:var(--surface) !important; -webkit-backdrop-filter:blur(18px) !important; backdrop-filter:blur(18px) !important; }
.hero .pill{ background:var(--surface-2) !important; }
.hero .ev{ background:var(--surface-2); }
.hero__glow{ position:absolute; left:50%; top:-28%; width:min(1100px,130vw); aspect-ratio:1.6;
  transform:translateX(-50%); background:radial-gradient(52% 50% at 50% 50%,var(--brand-soft),transparent 72%);
  pointer-events:none; filter:blur(12px); }
.hero__grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem,4vw,4rem); align-items:center; position:relative; }
@media (max-width:980px){ .hero__grid{ grid-template-columns:minmax(0,1fr); } }
.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .85rem .42rem .5rem; border-radius:999px;
  font-size:.8rem; font-weight:560; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); margin-bottom:1.3rem; }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; }
.hero__note{ margin-top:1.15rem; font-size:.82rem; color:var(--ink-3); }

/* ---------- Painel ao vivo ---------- */
.panel{ border-radius:var(--r-xl); padding:1rem; }
.panel__bar{ display:flex; align-items:center; gap:.6rem; padding:.35rem .5rem .8rem; }
.panel__title{ font-size:.8rem; font-weight:640; letter-spacing:.055em; text-transform:uppercase; color:var(--ink-3); }
.panel__live{ margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; color:var(--ok); font-weight:600; }
.panel__live i{ width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }
.feed{ display:grid; gap:.5rem; }
.ev{ display:flex; align-items:center; gap:.75rem; padding:.72rem .8rem; border-radius:var(--r-m); background:var(--surface-2); border:1px solid var(--hairline-2); }
.ev__ic{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--brand-soft); color:var(--brand-ink); }
.ev__ic svg{ width:17px; height:17px; }
.ev__ic--ok{ background:var(--ok-soft); color:var(--ok); }
.ev__ic--bad{ background:var(--danger-soft); color:var(--danger); }
.ev__t{ font-size:.89rem; font-weight:600; letter-spacing:-.008em; }
.ev__s{ font-size:.775rem; color:var(--ink-3); }
.ev__time{ margin-left:auto; font-size:.72rem; color:var(--ink-3); font-variant-numeric:tabular-nums; flex:none; }

/* ---------- Métricas ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ padding:1.4rem 1.2rem; border-radius:var(--r-l); text-align:center; }
.stat__n{ font-size:clamp(2rem,1.4rem + 1.9vw,2.85rem); font-weight:700; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; }
.stat__n span{ color:var(--brand-ink); }
.stat__l{ font-size:.8rem; color:var(--ink-2); margin-top:.5rem; line-height:1.35; }

/* ---------- Problema (antes/depois) ---------- */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:820px){ .ba{ grid-template-columns:minmax(0,1fr); } }
.ba__col{ padding:1.6rem; border-radius:var(--r-l); }
.ba__col--old{ border-color:color-mix(in srgb,var(--danger) 28%,transparent); }
.ba__col--new{ border-color:color-mix(in srgb,var(--ok) 32%,transparent); box-shadow:0 0 0 3px var(--ok-soft),var(--shadow-m); }
.ba__tag{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:660; letter-spacing:.06em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px; margin-bottom:1rem; }
.ba__tag--old{ background:var(--danger-soft); color:var(--danger); }
.ba__tag--new{ background:var(--ok-soft); color:var(--ok); }
.ba__list{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.ba__list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.94rem; color:var(--ink-2); line-height:1.45; }
.ba__list svg{ width:17px; height:17px; flex:none; margin-top:.18rem; }
.ba__col--old svg{ color:var(--danger); }
.ba__col--new svg{ color:var(--ok); }

/* ---------- Segmentos ---------- */
.seg{ position:relative; display:flex; gap:.15rem; padding:.3rem; border-radius:999px; overflow:hidden;
  touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; max-width:max-content; margin-inline:auto; }
.seg:active{ cursor:grabbing; }
.seg__ind{ position:absolute; top:0; left:0; border-radius:999px; background:var(--bg-elev);
  box-shadow:var(--shadow-s); border:1px solid var(--hairline-2); will-change:transform,width; pointer-events:none; }
.seg__b{ position:relative; z-index:1; padding:.6rem 1.05rem; border:0; background:none; cursor:pointer; border-radius:999px;
  font-size:.875rem; font-weight:580; letter-spacing:-.01em; color:var(--ink-2); white-space:nowrap; transition:color .2s ease;
  -webkit-tap-highlight-color:transparent; }
.seg__b[aria-selected="true"]{ color:var(--ink); font-weight:640; }
/* No celular as cinco abas não cabem numa linha. Rolar de lado escondia Offshore e Onshore,
   então elas quebram em duas linhas centralizadas e todas ficam à vista. */
@media (max-width:760px){ .seg{ max-width:100%; flex-wrap:wrap; justify-content:center; border-radius:24px; cursor:default; } }
.vocab{ display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; margin-top:2.2rem; }
@media (max-width:820px){ .vocab{ grid-template-columns:repeat(2,1fr); } }
.vc{ padding:1.15rem 1.1rem; border-radius:var(--r-l); }
.vc__k{ font-size:.72rem; font-weight:620; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.vc__v{ font-size:clamp(1.1rem,1rem + .6vw,1.42rem); font-weight:650; letter-spacing:-.02em; margin-top:.4rem; }
.seg__cap{ text-align:center; margin:1.6rem auto 0; max-width:46rem; }

/* ---------- Módulo (seção com demo) ---------- */
.mod{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,4.5vw,4rem); align-items:center; }
.mod--flip .mod__demo{ order:-1; }
@media (max-width:980px){ .mod{ grid-template-columns:minmax(0,1fr); } .mod--flip .mod__demo{ order:0; } }
.checks{ list-style:none; margin:1.3rem 0 0; padding:0; display:grid; gap:.7rem; }
.checks li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.94rem; color:var(--ink-2); line-height:1.45; }
.checks svg{ width:18px; height:18px; flex:none; color:var(--ok); margin-top:.14rem; }
.mod__cta{ margin-top:1.8rem; display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }

.demo{ border-radius:var(--r-xl); padding:1.15rem; position:relative; }
.demo__bar{ display:flex; align-items:center; gap:.6rem; padding:.2rem .35rem 1rem; }
.demo__dot{ width:9px; height:9px; border-radius:50%; background:var(--hairline); flex:none; }
.demo__name{ font-size:.75rem; font-weight:640; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-left:.3rem; }
.demo__replay{ margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:600;
  color:var(--ink-3); background:none; border:0; cursor:pointer; padding:.3rem .5rem; border-radius:999px; transition:color .2s,background .2s; }
.demo__replay:hover{ color:var(--brand-ink); background:var(--brand-soft); }
.demo__replay svg{ width:13px; height:13px; }

/* Reconhecimento facial */
.face{ position:relative; border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ink) 92%,transparent),color-mix(in srgb,var(--ink) 74%,transparent)); }
:root[data-theme="dark"] .face,:root:not([data-theme="light"]) .face{ background:linear-gradient(160deg,#141822,#1e2431); }
.face--video{ aspect-ratio:16/9; background:#000; }
.face--video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.face__sound{ position:absolute; right:.85rem; bottom:.85rem; display:flex; align-items:center; gap:.45rem; padding:.5rem .8rem;
  border:0; border-radius:999px; background:rgba(10,12,18,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; font:inherit; font-size:.8rem; font-weight:560; cursor:pointer; }
.face__sound svg{ width:16px; height:16px; flex:none; }
.face__sound .i-on,.face__sound[aria-pressed="true"] .i-off{ display:none; }
.face__sound[aria-pressed="true"] .i-on{ display:block; }
.face__grid{ position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:34px 34px; }
.face__silo{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:44%; color:rgba(255,255,255,.34); }
.face__box{ position:absolute; left:28%; top:18%; width:44%; height:58%; border:2px solid var(--brand); border-radius:14px;
  opacity:0; box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent); }
.face__box::before,.face__box::after{ content:""; position:absolute; width:14px; height:14px; border:2px solid #fff; }
.face__box::before{ left:-2px; top:-2px; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.face__box::after{ right:-2px; bottom:-2px; border-left:0; border-top:0; border-radius:0 0 6px 0; }
.face__scan{ position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--brand),transparent);
  box-shadow:0 0 14px 3px color-mix(in srgb,var(--brand) 55%,transparent); opacity:0; top:0; }
.face__pt{ position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 6px 1px color-mix(in srgb,var(--brand) 70%,transparent); }
.face__status{ position:absolute; left:.85rem; bottom:.85rem; right:.85rem; display:flex; align-items:center; gap:.5rem;
  padding:.55rem .7rem; border-radius:12px; background:rgba(10,12,18,.62);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; font-size:.8rem; font-weight:560; }
.face__status i{ width:8px; height:8px; border-radius:50%; background:var(--brand); flex:none; }
.face__res{ margin-top:.85rem; padding:.9rem 1rem; border-radius:var(--r-m); border:1px solid var(--hairline-2);
  background:var(--surface-2); display:flex; align-items:center; gap:.8rem; opacity:0; will-change:transform,opacity; }
.face__res--ok{ border-color:color-mix(in srgb,var(--ok) 34%,transparent); background:var(--ok-soft); }
.face__res--bad{ border-color:color-mix(in srgb,var(--danger) 34%,transparent); background:var(--danger-soft); }
.face__av{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.9rem; flex:none;
  background:var(--brand-soft); color:var(--brand-ink); }
.face__res--ok .face__av{ background:color-mix(in srgb,var(--ok) 22%,transparent); color:var(--ok); }
.face__res--bad .face__av{ background:color-mix(in srgb,var(--danger) 20%,transparent); color:var(--danger); }
.face__verdict{ margin-left:auto; font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; flex:none; }

/* Cronômetro SysGo */
.timer{ display:flex; align-items:baseline; gap:.5rem; justify-content:center; padding:.6rem 0 1.1rem; }
.timer__n{ font-size:clamp(3rem,2rem + 4vw,4.6rem); font-weight:700; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.timer__u{ font-size:1.5rem; font-weight:600; color:var(--ink-3); }
.timer.is-done .timer__n{ color:var(--ok); }
.tsteps{ display:grid; gap:.55rem; }
.tstep{ display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:var(--r-m);
  border:1px solid var(--hairline-2); background:var(--surface-2); opacity:.42; transition:opacity .3s ease,border-color .3s ease,background .3s ease; }
.tstep.on{ opacity:1; border-color:color-mix(in srgb,var(--ok) 34%,transparent); background:var(--ok-soft); }
.tstep__ic{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--hairline); color:var(--ink-3); transition:background .3s,color .3s; }
.tstep.on .tstep__ic{ background:color-mix(in srgb,var(--ok) 24%,transparent); color:var(--ok); }
.tstep__ic svg{ width:15px; height:15px; }
.tstep__t{ font-size:.88rem; font-weight:580; }
.tstep__at{ margin-left:auto; font-size:.75rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.tbar{ height:6px; border-radius:99px; background:var(--hairline); overflow:hidden; margin-bottom:1.1rem; }
.tbar__f{ height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--ok)); }

/* Reservas */
.cal{ display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; }
.cal__h{ font-size:.7rem; font-weight:660; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); text-align:center; padding-bottom:.3rem; }
.slot{ border:1px solid var(--hairline-2); background:var(--surface-2); border-radius:11px; padding:.5rem .3rem;
  font-size:.72rem; font-weight:600; text-align:center; cursor:pointer; color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s,transform .12s cubic-bezier(.3,.7,.4,1); -webkit-tap-highlight-color:transparent; }
.slot:hover:not(.taken):not(.mine){ border-color:var(--brand); color:var(--brand-ink); }
.slot.is-pressed{ transform:scale(.94); }
.slot.taken{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.slot.mine{ background:var(--brand); border-color:var(--brand); color:#fff; cursor:default; }
.resv{ margin-top:1rem; display:grid; gap:.5rem; }
.resv__row{ display:flex; align-items:center; gap:.6rem; padding:.62rem .75rem; border-radius:var(--r-m);
  background:var(--surface-2); border:1px solid var(--hairline-2); font-size:.82rem; opacity:0; }
.resv__row svg{ width:16px; height:16px; color:var(--ok); flex:none; }

/* Piscina */
.gauge{ position:relative; display:grid; place-items:center; padding:.5rem 0 1rem; }
.gauge svg{ width:min(210px,58%); height:auto; transform:rotate(-90deg); }
.gauge__track{ fill:none; stroke:var(--hairline); stroke-width:12; }
.gauge__fill{ fill:none; stroke:var(--brand); stroke-width:12; stroke-linecap:round; }
.gauge__c{ position:absolute; text-align:center; }
.gauge__n{ font-size:2.5rem; font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.gauge__d{ font-size:.78rem; color:var(--ink-3); margin-top:.2rem; }
.poolctl{ display:flex; gap:.5rem; justify-content:center; margin-bottom:.9rem; flex-wrap:wrap; }

/* Suporte */
.kb{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.kb__col{ background:var(--surface-2); border:1px solid var(--hairline-2); border-radius:var(--r-m); padding:.6rem; min-height:170px; }
.kb__h{ font-size:.7rem; font-weight:660; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); padding:.2rem .3rem .6rem; display:flex; gap:.4rem; align-items:center; }
.kb__h i{ width:7px; height:7px; border-radius:50%; flex:none; }
.tk{ background:var(--bg-elev); border:1px solid var(--hairline-2); border-radius:12px; padding:.6rem .65rem; margin-bottom:.45rem; box-shadow:var(--shadow-s); }
.tk__t{ font-size:.78rem; font-weight:620; line-height:1.3; }
.tk__m{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .35rem; margin-top:.4rem; font-size:.68rem; color:var(--ink-3); }
.tk__sla{ margin-left:auto; font-weight:660; font-variant-numeric:tabular-nums; }
.tk__sla.warn{ color:var(--warn); }
.tk__sla.ok{ color:var(--ok); }

/* Aparelho sobre o disco azul (celular e tablet) */
.stage{ position:relative; display:grid; place-items:center; padding:clamp(.5rem,2vw,1.5rem) 0; isolation:isolate; }
.stage__ball{ position:absolute; left:50%; top:50%; width:min(88%,470px); height:auto; aspect-ratio:1; transform:translate(-50%,-50%); z-index:-1; }
.stage__pulse{ position:absolute; left:50%; top:50%; width:min(150%,680px); aspect-ratio:1; transform:translate(-50%,-50%); z-index:-2; pointer-events:none; overflow:visible; }
.pr{ fill:rgba(10,108,255,.10); stroke:rgba(10,108,255,.28); stroke-width:1.2; transform-box:fill-box; transform-origin:center;
  opacity:0; animation:prPulse 5.4s cubic-bezier(.3,.6,.4,1) infinite; }
.pr2{ animation-delay:1.8s; } .pr3{ animation-delay:3.6s; }
/* Os anéis só pulsam com o palco à vista (o JS marca .is-on): fora da tela é pintura à toa. */
.pr{ animation-play-state:paused; }
.stage.is-on .pr{ animation-play-state:running; }
@keyframes prPulse{ 0%{ transform:scale(.62); opacity:0; } 18%{ opacity:.9; } 100%{ transform:scale(1.18); opacity:0; } }
.stage__dev{ width:auto; max-width:100%; filter:drop-shadow(0 28px 44px rgba(5,12,60,.32)); }
.stage--phone .stage__dev{ height:clamp(400px,46vw,560px); }
.stage--tablet .stage__dev{ height:clamp(400px,44vw,540px); }

/* Pré-cadastro */
.steps{ list-style:none; margin:1.3rem 0 0; padding:0; display:grid; gap:.65rem; counter-reset:step; }
.steps li{ counter-increment:step; display:flex; gap:.8rem; align-items:center; font-size:.94rem; color:var(--ink-2); line-height:1.4; }
.steps li::before{ content:counter(step); width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:var(--brand); color:#fff; font-size:.8rem; font-weight:700; }
.steps li:last-child{ color:var(--ink); font-weight:600; }
.steps li:last-child::before{ background:var(--ok); }
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; }
.tags span{ padding:.38rem .8rem; border-radius:999px; font-size:.78rem; font-weight:560; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--hairline); }

/* Controle total */
.benefits{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.55rem; max-width:34rem; }
.benefits li{ display:flex; align-items:center; gap:.75rem; padding:.45rem 1.1rem .45rem .45rem; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--hairline-2); font-size:.78rem; font-weight:680; letter-spacing:.035em; text-transform:uppercase; }
.benefits li:first-child{ background:#050c3a; color:#fff; border-color:transparent; }
.benefits img{ width:30px; height:30px; flex:none; }

/* Tecnologia (faixa azul-marinho) */
.tech{ color:#fff; background:#020a33 url(assets/bg-navy.webp) center/cover no-repeat; overflow:hidden; isolation:isolate; }
.tech::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:url(assets/wave.webp) right -12% center/min(1000px,110%) no-repeat; }
.tech .eyebrow{ color:#6aa6ff; }
.tech .lede{ color:rgba(255,255,255,.74); }
.tech__accent{ color:#3f8cff; }
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .tgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tgrid{ grid-template-columns:minmax(0,1fr); } }
.tcard{ padding:1.4rem 1.3rem; border-radius:var(--r-l); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.tcard img{ width:52px; height:52px; border-radius:14px; margin-bottom:1rem; }
.tcard h3{ margin:0 0 .35rem; font-size:1.02rem; font-weight:650; letter-spacing:-.012em; }
.tcard p{ margin:0; font-size:.88rem; line-height:1.5; color:rgba(255,255,255,.7); }

/* ---------- Grade de módulos ---------- */
.mgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
@media (max-width:980px){ .mgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .mgrid{ grid-template-columns:minmax(0,1fr); } }
.mcard{ padding:1.25rem 1.15rem; border-radius:var(--r-l); }
.mcard__ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-ink); margin-bottom:.7rem; }
.mcard__ic svg{ width:19px; height:19px; }

/* ---------- Calculadora ---------- */
.roi{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,3rem); align-items:center; }
@media (max-width:880px){ .roi{ grid-template-columns:minmax(0,1fr); } }
.rng{ margin-bottom:1.5rem; }
.rng__top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.6rem; }
.rng__l{ font-size:.85rem; font-weight:580; color:var(--ink-2); }
.rng__v{ font-size:1.05rem; font-weight:680; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:var(--hairline); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--brand);
  border:3px solid var(--bg-elev); box-shadow:var(--shadow-s); cursor:grab; }
input[type=range]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.12); }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--brand); border:3px solid var(--bg-elev); cursor:grab; }
input[type=range]:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }
.roi__out{ padding:1.8rem; border-radius:var(--r-xl); text-align:center; }
.roi__big{ font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem); font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ok); font-variant-numeric:tabular-nums; }
.roi__row{ display:flex; justify-content:space-between; align-items:center; padding:.7rem 0; border-top:1px solid var(--hairline-2); font-size:.88rem; }
.roi__row:first-of-type{ margin-top:1.4rem; }
.roi__row b{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ---------- Depoimentos ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .quotes{ grid-template-columns:minmax(0,1fr); } }
.q{ padding:1.6rem; border-radius:var(--r-l); display:flex; flex-direction:column; gap:1rem; margin:0; }
.q__t{ font-size:.985rem; line-height:1.55; }
.q__w{ display:flex; align-items:center; gap:.75rem; margin-top:auto; }
.q__av--img{ object-fit:cover; background:var(--hairline-2); }
.q__av{ width:38px; height:38px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; font-weight:700; font-size:.85rem; flex:none; }
.q__n{ font-size:.875rem; font-weight:640; }
.q__r{ font-size:.775rem; color:var(--ink-3); }

/* ---------- FAQ ---------- */
.faq{ max-width:52rem; margin-inline:auto; display:grid; gap:.6rem; }
.fq{ border-radius:var(--r-m); overflow:hidden; }
.fq__q{ width:100%; display:flex; align-items:center; gap:1rem; padding:1.05rem 1.2rem; background:none; border:0;
  cursor:pointer; text-align:left; font-size:1rem; font-weight:620; letter-spacing:-.012em; }
.fq__q svg{ width:17px; height:17px; margin-left:auto; flex:none; color:var(--ink-3); transition:transform .3s cubic-bezier(.3,.8,.35,1); }
.fq[open] .fq__q svg{ transform:rotate(180deg); }
.fq__a{ padding:0 1.2rem 1.15rem; color:var(--ink-2); font-size:.93rem; line-height:1.6; }

/* ---------- CTA ---------- */
.cta{ border-radius:var(--r-xl); padding:clamp(2.4rem,5vw,4rem); text-align:center; position:relative; overflow:hidden; }
.cta.cta--navy{ display:grid; grid-template-columns:1.15fr .85fr; padding:0; text-align:left; color:#fff;
  background:#020a33 url(assets/bg-navy.webp) center/cover no-repeat; border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow-l); }
.cta__body{ position:relative; z-index:1; padding:clamp(2.2rem,5vw,4rem); align-self:center; }
.cta--navy .lede{ color:rgba(255,255,255,.78); margin:0 0 1.9rem; }
.cta__act{ display:flex; gap:.7rem; flex-wrap:wrap; }
.cta--navy .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); }
.cta--navy .btn--ghost:hover{ border-color:rgba(255,255,255,.6); }
.cta__photo{ position:relative; min-height:300px; }
.cta__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%); mask-image:linear-gradient(90deg,transparent,#000 38%); }
@media (max-width:820px){
  .cta.cta--navy{ grid-template-columns:minmax(0,1fr); }
  .cta__photo{ min-height:240px; }
  .cta__photo img{ -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%); mask-image:linear-gradient(180deg,transparent,#000 40%); }
}

/* ---------- Sheet ---------- */
.scrim{ position:fixed; inset:0; z-index:90; background:rgba(6,8,14,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; will-change:opacity; }
/* Fechado, o fundo some de verdade. Só com opacidade zero ele seguia na tela inteira
   com desfoque, e o Safari refazia esse desfoque a cada quadro da rolagem. */
.scrim:not(.on){ visibility:hidden; }
.scrim.on{ pointer-events:auto; }
.sheet{ position:fixed; left:50%; bottom:0; z-index:91; width:min(560px,100%);
  border-radius:var(--r-xl) var(--r-xl) 0 0; padding:.6rem 1.5rem calc(1.9rem + env(safe-area-inset-bottom));
  background:var(--bg-elev); border:1px solid var(--hairline); border-bottom:0; box-shadow:var(--shadow-l);
  will-change:transform; touch-action:pan-y; transform:translate(-50%,calc(100% + 3rem)); max-height:92vh; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain; }
@media (min-width:721px){ .sheet{ bottom:1.5rem; width:min(520px,calc(100% - 2rem)); border-radius:var(--r-xl); border-bottom:1px solid var(--hairline); max-height:calc(100dvh - 3rem); } }
@media (max-width:720px){ .field input,.field select{ font-size:16px; } }
.sheet[aria-hidden="true"]{ visibility:hidden; pointer-events:none; }
.sheet__grab{ position:relative; width:100%; height:30px; margin:0 0 .3rem; cursor:grab; touch-action:none; }
.sheet__grab::before{ content:""; position:absolute; left:50%; top:12px; width:38px; height:5px; margin-left:-19px; border-radius:99px; background:var(--hairline); }
.sheet h3{ margin:0 0 .35rem; font-size:1.3rem; letter-spacing:-.02em; }
.field{ display:block; margin-top:.85rem; }
.field span{ display:block; font-size:.78rem; font-weight:620; color:var(--ink-2); margin-bottom:.35rem; }
.field input,.field select{ width:100%; padding:.72rem .85rem; border-radius:var(--r-s); font-size:.95rem;
  border:1px solid var(--hairline); background:var(--bg); color:var(--ink); outline:none; transition:border-color .18s,box-shadow .18s; }
.field input:focus,.field select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }

/* ---------- Rodapé ---------- */
.foot{ padding:3rem 0 3.5rem; border-top:1px solid var(--hairline-2); }
.foot__in{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; }
.foot__wa{ margin-left:auto; }
.lgpd{ font-size:.775rem; color:var(--ink-3); line-height:1.6; max-width:70ch; margin-top:1.6rem; }

/* ---------- Barra fixa de conversão ---------- */
.dock{ position:fixed; left:50%; bottom:1rem; z-index:70; transform:translate(-50%,160%);
  display:flex; align-items:center; gap:.9rem; padding:.55rem .6rem .55rem 1.15rem; border-radius:999px;
  background:var(--surface); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--hairline); box-shadow:var(--shadow-l); will-change:transform; max-width:calc(100% - 2rem); }
.dock__t{ font-size:.86rem; font-weight:580; white-space:nowrap; }
@media (max-width:560px){ .dock__t{ display:none; } .dock{ padding-left:.6rem; } }

/* ---------- Modo apresentação ---------- */
.pres{ position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); z-index:75;
  display:none; align-items:center; gap:.7rem; padding:.5rem .55rem .5rem 1rem; border-radius:999px;
  background:var(--surface); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--hairline); box-shadow:var(--shadow-l); }
body.is-pres .pres{ display:flex; }
body.is-pres .dock{ display:none; }
.pres__n{ font-size:.82rem; font-weight:640; font-variant-numeric:tabular-nums; min-width:3.6rem; text-align:center; }
.pres__t{ font-size:.82rem; color:var(--ink-2); max-width:15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px){ .pres__t{ display:none; } }
.presbar{ position:fixed; left:0; top:0; height:3px; background:var(--brand); z-index:85; width:0; transition:width .3s ease; display:none; }
body.is-pres .presbar{ display:block; }
body.is-pres .sec{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-block:6rem 5rem; }
body.is-pres .hero{ min-height:100vh; display:flex; align-items:center; }

/* ---------- Liquid Glass ----------
   Vidro bem translúcido: desfoque + saturação do que passa por trás, borda com
   brilho especular e luz interna. A barra do topo vira cápsula ao rolar; a pílula
   de conversão e o controle de apresentação usam o mesmo material.
   O JS mede a claridade do que está atrás (data-lg="light|dark") e o vidro, o
   texto e a logo se adaptam para nunca ficarem ilegíveis. */
.nav{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0; padding:.6rem 0; }
.nav.is-scrolled{ border-bottom:0; }
.nav__in{ position:relative; border-radius:999px; padding:0 .3rem; transition:padding .35s cubic-bezier(.3,.8,.35,1),background .35s ease,box-shadow .35s ease; }
.nav.is-scrolled .nav__in{ padding:0 .55rem 0 1.15rem; }
.nav.is-scrolled .nav__in,.dock,.pres{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%),color-mix(in srgb,var(--bg-elev) 5%,transparent);
  -webkit-backdrop-filter:blur(7px) saturate(180%); backdrop-filter:var(--lg-filter,) blur(7px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.18),
    inset 0 0 14px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 0 .5px color-mix(in srgb,var(--ink) 14%,transparent),0 10px 34px rgba(10,14,30,.12),0 2px 8px rgba(10,14,30,.06);
  border:0;
}
.nav__in::before,.dock::before,.pres::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.10) 28%,rgba(255,255,255,.04) 62%,rgba(255,255,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0; transition:opacity .35s ease; }
.nav.is-scrolled .nav__in::before,.dock::before,.pres::before{ opacity:1; }
.dock,.pres{ border:0; }

/* Fundo claro por trás: vidro claro, texto escuro */
.nav[data-lg="light"],.dock[data-lg="light"],.pres[data-lg="light"],.nav [data-lg="light"],.dock [data-lg="light"]{
  --ink:#11131a; --ink-2:#3d4252; --ink-3:#6a7186; --brand-ink:#0a6cff;
  --hairline:rgba(0,0,0,.14); --hairline-2:rgba(0,0,0,.08); --surface-2:rgba(255,255,255,.5); }
.nav[data-lg="light"].is-scrolled .nav__in,.dock[data-lg="light"],.pres[data-lg="light"]{
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 45%),rgba(255,255,255,.05); }
/* Fundo escuro/imagem por trás: vidro escuro, texto claro */
.nav[data-lg="dark"],.dock[data-lg="dark"],.pres[data-lg="dark"],.nav [data-lg="dark"],.dock [data-lg="dark"]{
  --ink:#f4f5f9; --ink-2:rgba(244,245,249,.86); --ink-3:rgba(244,245,249,.62); --brand-ink:#7db4ff;
  --hairline:rgba(255,255,255,.22); --hairline-2:rgba(255,255,255,.12); --surface-2:rgba(255,255,255,.1); }
.nav[data-lg="dark"].is-scrolled .nav__in,.dock[data-lg="dark"],.pres[data-lg="dark"]{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 45%),rgba(10,12,20,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 0 22px rgba(255,255,255,.05),
    0 0 0 .5px rgba(255,255,255,.14),0 12px 38px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3); }
.nav [data-lg="dark"],.dock [data-lg="dark"]{ text-shadow:0 1px 8px rgba(0,0,0,.4); }
.nav[data-lg="dark"] .nav__links a:hover{ color:#fff; }
.nav[data-lg],.dock[data-lg],.pres[data-lg],.nav [data-lg],.dock [data-lg]{ color:var(--ink); }
html .nav .logo[data-lg="light"] .logo__img--ink{ display:block; }
html .nav .logo[data-lg="light"] .logo__img--paper{ display:none; }
html .nav .logo[data-lg="dark"] .logo__img--ink{ display:none; }
html .nav .logo[data-lg="dark"] .logo__img--paper{ display:block; }

/* ---------- Celular ----------
   Num iPhone 14 (390px) logo, tema, Entrar e Falar com Especialista não cabiam juntos
   e o botão principal saía da tela. No celular o tema segue o do aparelho, e as margens
   da barra encolhem para Entrar e o botão principal caberem a partir de 360px. */
@media (max-width:560px){
  .nav .wrap{ width:calc(100% - 1.25rem); }
  .nav__in{ gap:.5rem; }
  .nav.is-scrolled .nav__in{ padding:0 .3rem 0 .85rem; }
  .nav__act{ gap:.4rem; }
  .nav__act #themeBtn{ display:none; }
  .nav__act .btn--sm{ padding:.5rem .8rem; font-size:.8rem; }

  /* Botões com texto longo quebram dentro da própria largura em vez de vazar do cartão. */
  .btn{ white-space:normal; text-align:center; }
  .roi{ padding:1.25rem !important; }
  .roi__out{ padding:1.4rem 1.1rem; }

  .kb{ gap:.4rem; }
  .kb__col{ padding:.45rem; }
  .kb__h{ font-size:.62rem; letter-spacing:.02em; padding:.2rem .15rem .5rem; }
  .tk{ padding:.5rem; }
  .tk__t{ font-size:.74rem; }

  /* Rodapé empilhado: o WhatsApp sozinho à direita parecia desalinhado. */
  .foot__in{ gap:.6rem 1.5rem; }
  .foot__wa{ margin-left:0; }
}

/* ---------- Celular e tablet: vidro só onde passa por cima do conteúdo ----------
   No Safari do iPhone cada backdrop-filter vira uma camada com cópia desfocada do que
   está atrás. Eram 47 (perto de 120 MB só de camada, fora os buffers do desfoque): ao
   rolar, as seções novas ficavam pretas e o iOS derrubava a aba. Sobre o fundo liso da
   página o desfoque não muda nada, então sai dos cartões e fica só na barra do topo e na
   pílula de conversão. No herói, o painel e a pílula ficam mais opacos para a cidade ao
   fundo não atrapalhar a leitura. */
@media (hover:none),(max-width:980px){
  .material,.tcard,.pill,.icon-btn,.face__sound{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .hero .material,.hero .pill{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .hero .material{ background:rgba(8,16,60,.78) !important; }
  .hero .pill{ background:rgba(8,16,60,.55) !important; }
  .material--thick{ box-shadow:var(--shadow-m); }
}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:background .2s ease,color .2s ease; }
  .btn.is-pressed,.icon-btn.is-pressed,.slot.is-pressed{ --s:1; transform:none; }
  .ic-theme__cut,.ic-theme__core,.ic-theme__rays{ transition:none; }
  .face__res,.resv__row{ opacity:1; }
}
@media (prefers-reduced-transparency:reduce){
  .material,.pill,.sheet{ background:var(--bg-elev) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .ev,.tstep,.slot,.kb__col,.resv__row{ background:var(--bg); }
  .scrim{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(6,8,14,.6); }
  .face__status{ background:rgba(10,12,18,.9); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-contrast:more){
  :root{ --hairline:rgba(0,0,0,.5); --ink-2:#2a2e3c; --ink-3:#414657; }
  :root[data-theme="dark"],:root:not([data-theme="light"]){ --hairline:rgba(255,255,255,.55); }
  .material,.mcard,.stat,.q,.vc,.demo{ background:var(--bg-elev); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }