/* ============================================================================
   /dados — "Feito de dados". Mesma identidade das outras páginas BlueBed:
   Inter, Navy/Blue/Azure/Mist, pílulas, cartões arredondados e tema escuro.
   ========================================================================= */
:root{
  --ink:#0b1420; --deep:#0b1d35; --muted:#54637a; --line:#dce5f1;
  --accent:#0b5dbd; --accent-from:#107de9; --accent-to:#0b5dbd; --sky:#8ec3ff;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important }
html{ font-size:16px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth }
html{ font-size:clamp(.875rem, calc(11.714px + .2976vw), 1.125rem) }   /* fonte raiz contínua: 14px em 768, 16px em 1440, teto 18px; sem serrote e acompanha o zoom */
@media (max-width:640px){ html{ font-size:clamp(.875rem, 3.733333vw, .9375rem) } }
body{ background:var(--ink); color:#fff; font-family:'Inter',Arial,Helvetica,sans-serif; overflow-x:hidden }
body.travado{ overflow:hidden }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
img,svg,canvas{ display:block }
:focus-visible{ outline:2px solid var(--accent-from); outline-offset:3px }
.shell{ width:100%; max-width:80rem; margin-inline:auto; padding-inline:1.25rem }
@media (min-width:640px){ .shell{ padding-inline:2rem } }

/* ---------- revelações ---------- */
.rv{ opacity:0; transform:translateY(var(--rv-y,16px));
  transition:opacity .8s var(--ease-out) var(--d,0ms), transform .8s var(--ease-out) var(--d,0ms) }
.rv.in{ opacity:1; transform:none }

/* ---------- pílulas ---------- */
.btn{ display:inline-flex; align-items:center; gap:.75rem; border-radius:9999px; font-size:.9375rem; font-weight:500;
  white-space:nowrap; padding:.875rem 1.75rem; transition:transform .35s var(--ease), background .25s, border-color .25s, color .25s }
.btn-primario{ background:var(--accent-from); color:#fff; padding:.375rem .375rem .375rem 1.5rem }
.btn-primario::after{ content:"→"; display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:9999px;
  background:#fff; color:var(--accent); font-size:1rem; transition:transform .35s var(--ease) }
.btn-fantasma{ border:1px solid rgba(255,255,255,.25); color:#fff }
@media (hover:hover){
  .btn:hover{ transform:scale(1.03) }
  .btn-primario:hover::after{ transform:translateX(3px) }
  .btn-fantasma:hover{ border-color:var(--sky); color:var(--sky) }
}
.acoes{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem }

/* ---------- abertura ---------- */
#loader{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem; background:var(--ink); color:#fff; transition:transform 1s cubic-bezier(.76,0,.24,1) }
#loader.sai{ transform:translateY(-100%) }
#loader .marca{ display:flex; align-items:center; gap:.55rem; font-size:1.625rem; font-weight:600; letter-spacing:-.01em }
#loader .marca svg{ width:1.9rem; height:1.9rem; color:var(--accent-from) }
#loader p{ font-size:.875rem; color:rgba(255,255,255,.62) }
#loader .trilho{ width:min(22rem,72vw); height:1px; background:rgba(255,255,255,.15) }

/* o mesmo carregamento em todas as páginas: marca, frase, Carregando + contador */
#loader .frase{ max-width:26ch; text-align:center; font-size:.875rem; line-height:1.5; color:rgba(255,255,255,.55) }
#loader .barra{ display:flex; flex-direction:column; gap:.75rem; width:min(22rem,72vw) }
#loader .barra .trilho{ width:100% }
#loader .linha{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.62) }
#loader .linha span+span{ color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums }
#loader .trilho i{ display:block; height:100%; width:0; background:var(--accent-from) }

/* ---------- cabeçalho ---------- */
.topo{ position:fixed; inset-inline:0; top:0; z-index:50; color:#fff; transition:background .4s, backdrop-filter .4s }
.topo.rolado{ background:rgba(11,20,32,.72); backdrop-filter:blur(14px) }
.topo .dentro{ max-width:80rem; margin-inline:auto; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1.25rem }
@media (min-width:640px){ .topo .dentro{ padding:1.4rem 2rem } }
.marca{ display:inline-flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em;
  transition:transform .35s var(--ease) }
.marca svg{ width:1.25rem; height:1.25rem; color:var(--accent-from) }
@media (hover:hover){ .marca:hover{ transform:scale(1.04) } }
.sub{ display:inline-flex; align-items:center; margin-left:.125rem; padding:.2rem .5rem; border-radius:9999px;
  font-size:.625rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1;
  background:rgba(142,195,255,.16); color:var(--sky) }
.topo nav{ display:none; gap:2rem; font-size:.875rem; font-weight:500 }
@media (min-width:1024px){ .topo nav{ display:flex } }
.topo nav a{ opacity:.8; transition:opacity .3s, transform .3s var(--ease) }
.topo nav a[aria-current]{ opacity:1; color:var(--sky) }
@media (hover:hover){ .topo nav a:hover{ opacity:1; transform:translateY(-2px) } }
.topo .fale{ display:inline-flex; align-items:center; padding:.5rem 1rem; border-radius:9999px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; transition:background .3s }
.topo .fale:hover{ background:rgba(255,255,255,.18) }
@media (max-width:640px){ .topo .fale{ display:none } }

/* ---------- o raio-X ---------- */
.raiox{ position:relative }
.palco{ position:relative; height:100lvh; overflow:hidden; background:#05080f }
/* a cena é empurrada para a direita: o tablet sai de trás do texto */
.cena{ position:absolute; inset:0; z-index:1 }
@media (min-width:1024px){ .cena{ inset:0 -10% 0 18% } }
.cena .foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% center }
@media (max-width:1023px){ .cena .foto{ object-position:38% 76% } }
/* o "por baixo" é recortado por duas máscaras: o dedo (PNG) e a lente */
.cena canvas{ position:absolute; left:0; top:0; z-index:2; transform-origin:0 0; will-change:transform;
  -webkit-mask-image:url("hero/tablet-mascara-app.png"), var(--lente, none);
  mask-image:url("hero/tablet-mascara-app.png"), var(--lente, none);
  -webkit-mask-size:100% 100%, auto; mask-size:100% 100%, auto;
  -webkit-mask-repeat:no-repeat, no-repeat; mask-repeat:no-repeat, no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect }
.cena .veu{ position:absolute; inset:0; z-index:3; pointer-events:none }
@media (min-width:1024px){
  .cena .veu{ background:linear-gradient(90deg, #05080f 0%, rgba(5,8,15,.9) 10%, rgba(5,8,15,.25) 26%, rgba(5,8,15,0) 40%) }
}
@media (max-width:1023px){
  .cena{ inset:0 0 auto 0; height:56vh }
  .cena .veu{ background:linear-gradient(180deg, rgba(5,8,15,.35) 0%, rgba(5,8,15,0) 30%, rgba(5,8,15,.8) 78%, #05080f 98%) }
  .palco-grade{ padding-bottom:3rem }
}
.palco-grade{ position:relative; z-index:4; height:100%; max-width:80rem; margin-inline:auto; display:grid;
  align-content:start; padding:7rem 1.25rem 3rem }
@media (min-width:640px){ .palco-grade{ padding-inline:2rem } }
@media (max-width:1023px){ .palco-grade{ align-content:end; padding-bottom:4rem } }
.palco-texto{ max-width:27rem }

.selo{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(255,255,255,.6) }
.selo::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:currentColor; opacity:.7 }
.selo-azul{ color:var(--sky) }
.titulo{ margin-top:1.25rem; font-size:2.25rem; font-weight:600; line-height:1.02; letter-spacing:-.02em }
@media (min-width:640px){ .titulo{ font-size:2.75rem } }
@media (min-width:768px){ .titulo{ font-size:2.875rem } }
.grad{ color:var(--sky) }
.subtitulo{ margin-top:1.25rem; max-width:28rem; font-size:1.0625rem; font-weight:500; line-height:1.5; color:rgba(255,255,255,.8) }
.rotulo{ margin-top:2rem; display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .9rem; border-radius:9999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(5,8,15,.5); color:rgba(255,255,255,.7);
  font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
.rotulo::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--accent-from);
  box-shadow:0 0 0 3px rgba(16,125,233,.3) }

/* a lupa do raio-X: o aro que acompanha o ponteiro */
.cena .lupa{ position:absolute; z-index:4; width:100px; height:100px; border-radius:50%; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  border:1.5px solid rgba(142,195,255,.7);
  box-shadow:0 0 0 1px rgba(5,8,15,.55), 0 0 42px rgba(16,125,233,.35), inset 0 0 60px rgba(16,125,233,.18) }
.cena .lupa::after{ content:""; position:absolute; inset:7%; border-radius:50%;
  border:1px solid rgba(142,195,255,.22) }

/* ---------- faixas de conteúdo ---------- */
.faixa{ padding:6rem 0 }
@media (min-width:768px){ .faixa{ padding:7.5rem 0 } }
.secao-titulo{ margin-top:1rem; max-width:22ch; font-size:2rem; font-weight:600; line-height:1.05; letter-spacing:-.02em }
@media (min-width:768px){ .secao-titulo{ font-size:3rem } }

.cartas{ margin-top:3rem; display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:768px){ .cartas{ grid-template-columns:repeat(3,1fr) } }
.carta{ padding:2rem; border-radius:1.5rem; background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:transform .4s var(--ease), background .4s }
@media (hover:hover){ .carta:hover{ transform:translateY(-4px); background:rgba(255,255,255,.07) } }
.carta-n{ font-size:.75rem; font-weight:600; letter-spacing:.1em; color:var(--sky); font-variant-numeric:tabular-nums }
.carta h3{ margin-top:1.25rem; font-size:1.375rem; font-weight:600; letter-spacing:-.015em }
.carta p{ margin-top:.65rem; font-size:.9375rem; line-height:1.6; color:rgba(255,255,255,.6) }

.blocos{ margin-top:3rem; display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:640px){ .blocos{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .blocos{ grid-template-columns:repeat(4,1fr) } }
.bloco{ padding:2rem; border-radius:1.5rem; background:linear-gradient(160deg, rgba(16,125,233,.14), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.bloco-ic{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:1rem; background:var(--accent-from) }
.bloco-ic svg{ width:1.5rem; height:1.5rem; fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.bloco h3{ margin-top:1.5rem; font-size:1.25rem; font-weight:600; letter-spacing:-.015em }
.bloco p{ margin-top:.65rem; font-size:.9375rem; line-height:1.6; color:rgba(255,255,255,.62) }

.passos{ margin-top:3rem; display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:768px){ .passos{ grid-template-columns:repeat(4,1fr) } }
.passo{ position:relative; padding:1.75rem 1.5rem; border-radius:1.25rem; background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.passo-n{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:9999px;
  background:rgba(16,125,233,.18); color:var(--sky); font-size:.8125rem; font-weight:600 }
.passo h3{ margin-top:1.25rem; font-size:1.125rem; font-weight:600 }
.passo p{ margin-top:.5rem; font-size:.875rem; line-height:1.55; color:rgba(255,255,255,.58) }

.convite{ padding:3rem 2rem; border-radius:2rem; background:linear-gradient(150deg, #0d1c30, #060d18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
@media (min-width:768px){ .convite{ padding:4rem 3.5rem } }
.convite-texto{ margin-top:1.25rem; max-width:44rem; font-size:1.0625rem; line-height:1.6; color:rgba(255,255,255,.75) }

/* ---------- rodapé ---------- */
.rodape{ position:relative; overflow:hidden; background:#060b14; padding-bottom:8rem }
.rodape-grade{ position:relative; z-index:2; max-width:80rem; margin-inline:auto; display:grid; grid-template-columns:1fr;
  gap:2.5rem; padding:5rem 1.25rem 2.5rem }
@media (min-width:640px){ .rodape-grade{ padding-inline:2rem } }
@media (min-width:1024px){ .rodape-grade{ grid-template-columns:2fr 1fr 1fr } }
.rodape-marca{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 }
.rodape-marca svg{ width:1.25rem; height:1.25rem; color:var(--accent-from) }
.rodape-cel p{ margin-top:1rem; max-width:24rem; font-size:.875rem; line-height:1.55; color:rgba(255,255,255,.62) }
.rodape-cel h3{ font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62) }
.rodape-cel ul{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.75rem; font-size:.9375rem }
.rodape-cel ul a{ color:rgba(255,255,255,.72); transition:color .2s }
.rodape-cel ul a:hover{ color:#fff }
.rodape-sistema p{ margin-top:1rem; font-size:.8125rem; color:rgba(255,255,255,.62) }
.rodape-copy{ position:relative; z-index:2; max-width:80rem; margin-inline:auto; padding:2rem 1.25rem;
  border-top:1px solid rgba(255,255,255,.08); font-size:.8125rem; color:rgba(255,255,255,.62) }
@media (min-width:640px){ .rodape-copy{ padding-inline:2rem } }
.marca-dagua{ position:absolute; inset-inline:0; bottom:1rem; z-index:1; text-align:center; font-weight:700; line-height:1;
  font-size:min(13rem,15vw); letter-spacing:-.02em; color:rgba(255,255,255,.035); pointer-events:none; user-select:none }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } .rv{ opacity:1; transform:none } }

/* ============ menu no celular (abaixo de 1024 px) ============ */
.menu-botao{ display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; margin-left:.5rem;
  border:1px solid rgba(255,255,255,.18); border-radius:9999px; background:rgba(255,255,255,.08); color:#fff; cursor:pointer }
.menu-botao span{ position:relative; display:block; width:1.1rem; height:1.5px; background:currentColor; transition:background .2s }
.menu-botao span::before, .menu-botao span::after{ content:""; position:absolute; left:0; width:100%; height:1.5px; background:currentColor; transition:transform .3s var(--ease) }
.menu-botao span::before{ top:-.35rem } .menu-botao span::after{ top:.35rem }
.topo.menu-aberto .menu-botao span{ background:transparent }
.topo.menu-aberto .menu-botao span::before{ transform:translateY(.35rem) rotate(45deg) }
.topo.menu-aberto .menu-botao span::after{ transform:translateY(-.35rem) rotate(-45deg) }
.menu-botao:focus-visible{ outline:2px solid #8EC3FF; outline-offset:2px }
.topo .direita{ display:flex; align-items:center }
@media (min-width:1024px){ .menu-botao{ display:none } }
@media (max-width:1023px){
  .topo.menu-aberto{ background:rgba(11,20,32,.97); backdrop-filter:blur(14px) }
  .topo.menu-aberto nav{ display:flex; flex-direction:column; gap:0; position:fixed; inset:4.5rem 0 auto 0; padding:1rem 1.25rem 2rem;
    background:rgba(11,20,32,.97); font-size:1.125rem; border-bottom:1px solid rgba(255,255,255,.1) }
  .topo.menu-aberto nav a{ padding:.9rem 0; opacity:1; border-top:1px solid rgba(255,255,255,.08) }
}

/* Space Mono: a segunda voz do manual — rótulos, numeração e fonte de dado. Texto corrido e números grandes seguem em Inter. */
.selo, #loaderNum{ font-family:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase }

/* o aro da lupa em SVG (raiox.js): a mesma perspectiva do código, por isso coincide com a lente */
.cena .anel{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; overflow:visible;
  opacity:0; transition:opacity .35s ease }
.cena .anel path{ fill:none; vector-effect:non-scaling-stroke }
.cena .anel .fora{ stroke:rgba(142,195,255,.75); stroke-width:1.5; filter:drop-shadow(0 0 10px rgba(16,125,233,.55)) }
.cena .anel .dentro{ stroke:rgba(142,195,255,.22); stroke-width:1 }