/* ============================================================
   MandatoWeb — Landing page
   Estrutura fiel ao mockup: hero escuro fixo, módulos 3x2,
   showcase em fileira, planos com chamada ao lado.
   ============================================================ */

:root {
  --azul:   #2563EB;
  --azul2:  #3B82F6;
  --azul-c: #60A5FA;
  --roxo:   #7C3AED;
  --verde:  #22C55E;
  --ambar:  #F59E0B;
  --rosa:   #F43F5E;
  --ciano:  #06B6D4;

  --bg:     #FFFFFF;
  --bg2:    #F7F9FC;
  --surf:   #FFFFFF;
  --surf2:  #F4F7FB;
  --linha:  #E5E7EB;
  --linha2: #EEF1F6;
  --txt:    #0B1220;
  --txt2:   #475569;
  --txt3:   #94A3B8;
  --brilho: rgba(37,99,235,.07);

  --escuro:  #0B1120;
  --escuro2: #111C38;

  --sombra:   0 1px 2px rgba(15,23,42,.04), 0 10px 26px -16px rgba(15,23,42,.22);
  --sombra-g: 0 2px 6px rgba(15,23,42,.05), 0 34px 70px -36px rgba(15,23,42,.35);

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --t: 220ms cubic-bezier(.2,.8,.2,1);
  --wrap: 1200px;
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; max-width: 100vw; overflow-x: hidden;
  background: var(--bg); color: var(--txt);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; letter-spacing: -.03em; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* Rede de segurança: um SVG sem largura declarada assume o tamanho do
   viewBox e estoura o layout (acontece em zoom extremo, quando o navegador
   ainda não aplicou as regras específicas). Este teto vale para todos e é
   sobrescrito pelas regras de cada componente. */
svg { max-width: 100%; max-height: 100%; flex: none; }
button { font: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--fino { max-width: 800px; }
.grad {
  background: linear-gradient(100deg, var(--azul2), #8B5CF6 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------- botões ---------------- */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 19px; border-radius: 10px; border: 1px solid transparent;
  font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
}
.bt svg { width: 16px; height: 16px; }
.bt--g { padding: 14px 26px; font-size: .98rem; border-radius: 12px; }
.bt--full { width: 100%; }
.bt--p {
  color: #fff; background: var(--azul);
  box-shadow: 0 10px 26px -12px rgba(37,99,235,.75);
}
.bt--p:hover { background: #1D4ED8; transform: translateY(-1px); }
.bt--s { color: var(--txt); background: var(--surf); border-color: var(--linha); }
.bt--s:hover { border-color: var(--azul); color: var(--azul); }
/* variante para o hero escuro */
.bt--v {
  color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.bt--v:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }

/* ---------------- topo ----------------
   Fica sobre o hero escuro, então nasce transparente com texto claro e
   vira branco assim que a página rola. */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  transition: background var(--t), box-shadow var(--t);
}
.topo__in { display: flex; align-items: center; gap: 24px; height: 72px; min-width: 0; }
/* Ao rolar, o cabeçalho ganha corpo mas continua escuro: o texto claro
   permanece legível e a barra não pisca de escuro para branco no meio da
   rolagem. O vidro escuro também conversa com o painel do sistema. */
.topo.rolou {
  background: rgba(9,15,29,.82);
  backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.07),
    0 12px 30px -18px rgba(4,10,24,.9);
}

.marca { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.marca__ic {
  width: 36px; height: 36px; flex: none; object-fit: contain;
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.5))
    drop-shadow(0 8px 20px rgba(37,99,235,.5));
  transition: filter 320ms cubic-bezier(.2,.8,.2,1), transform 320ms cubic-bezier(.2,.8,.2,1);
}
.marca:hover .marca__ic {
  transform: translateY(-1px) scale(1.04);
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,.55))
    drop-shadow(0 12px 28px rgba(37,99,235,.7));
}
.marca__t { font-weight: 700; font-size: 1.06rem; letter-spacing: -.02em; color: #fff; }
.marca__t i { font-style: normal; color: var(--azul-c); }
.topo.rolou .marca__t { color: #fff; }
.topo.rolou .marca__t i { color: var(--azul-c); }

.topo__nav { display: flex; gap: 2px; margin: 0 auto; }
.topo__nav a {
  padding: 8px 14px; border-radius: 9px; font-size: .89rem; font-weight: 500;
  color: rgba(255,255,255,.78); transition: background var(--t), color var(--t);
}
.topo__nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.topo.rolou .topo__nav a { color: rgba(255,255,255,.78); }
.topo.rolou .topo__nav a:hover { background: rgba(255,255,255,.1); color: #fff; }

.topo__acoes { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.lk { font-size: .89rem; font-weight: 500; color: rgba(255,255,255,.82); padding: 8px 6px; }
.lk:hover { color: #fff; }
.topo.rolou .lk { color: rgba(255,255,255,.82); }
.topo.rolou .lk:hover { color: #fff; }

.menu-btn {
  display: none; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff;
}
.topo.rolou .menu-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.menu-btn svg { width: 20px; height: 20px; margin: 0 auto; }
.so-mini { display: none !important; }

/* ---------------- hero premium ----------------
   Fundo em camadas (malha, faixas, halos, partículas), painel suspenso
   com perspectiva e satélites em órbita. Tudo em CSS puro. */
.hero {
  position: relative; overflow: hidden;
  background: #060B16 url('/assets/img/land/banner.webp') center bottom / cover no-repeat;
  padding: 132px 0 96px;
  perspective: 1600px;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg,
    rgba(6,11,22,.94) 0%, rgba(8,15,34,.84) 34%,
    rgba(10,20,48,.52) 60%, rgba(10,22,56,.24) 100%);
}
/* Granulado sutil: tira o aspecto "liso demais" dos gradientes.
   Fica em z-index 0 (atrás de tudo, sobre o gradiente base) porque o
   mix-blend-mode: overlay apagaria o texto branco se pintasse por cima
   da coluna de conteúdo. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (min-width: 1440px) { .hero > .wrap { max-width: 1320px; } }

/* malha técnica com deriva lenta */
.hero__malha {
  position: absolute; inset: -60px 0; pointer-events: none; opacity: .32; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 74% 82% at 24% 45%, #000 10%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 74% 82% at 24% 45%, #000 10%, transparent 74%);
  animation: deriva 26s linear infinite;
}
@keyframes deriva { to { background-position: 52px 52px, 52px 52px; } }

.hero__faixas {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(56%, 900px);
  pointer-events: none; overflow: hidden; z-index: 1;
}
.hero__faixas::before, .hero__faixas::after {
  content: ''; position: absolute; top: -30%; bottom: -30%;
  background: linear-gradient(180deg, transparent, rgba(96,165,250,.18), transparent);
  transform: rotate(14deg);
}
.hero__faixas::before { left: -6%; width: 190px; animation: respiraFaixa 9s ease-in-out infinite; }
.hero__faixas::after  { left: 20%; width: 92px; opacity: .55; animation: respiraFaixa 11s ease-in-out -3s infinite; }
@keyframes respiraFaixa { 50% { opacity: .3; transform: rotate(14deg) translateY(-18px); } }

/* halos cinematográficos: azul, verde e dourado */
.hero__halo {
  position: absolute; left: -6%; top: 20%; width: 660px; height: 540px;
  pointer-events: none; z-index: 1; filter: blur(24px);
  background: radial-gradient(circle, rgba(23,92,211,.34) 0%, transparent 66%);
  animation: pulsaHalo 12s ease-in-out infinite;
}
.hero__halo--verde {
  left: auto; right: 4%; top: 54%; width: 520px; height: 440px;
  background: radial-gradient(circle, rgba(31,169,113,.22) 0%, transparent 68%);
  animation-duration: 15s; animation-delay: -4s;
}
.hero__halo--ouro {
  left: 42%; top: -12%; width: 480px; height: 400px;
  background: radial-gradient(circle, rgba(245,179,1,.14) 0%, transparent 70%);
  animation-duration: 18s; animation-delay: -8s;
}
@keyframes pulsaHalo { 50% { opacity: .62; transform: scale(1.1); } }

/* partículas: pontinhos que sobem devagar */
.hero__part { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hero__part i {
  position: absolute; bottom: -12px;
  left: calc(var(--n) * 7.1%);
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(147,197,253,.9);
  box-shadow: 0 0 8px 2px rgba(96,165,250,.5);
  opacity: 0;
  animation: sobe calc(14s + var(--n) * 1.4s) linear calc(var(--n) * -1.7s) infinite;
}
@keyframes sobe {
  10% { opacity: .8; }
  90% { opacity: .5; }
  100% { transform: translateY(-92vh) translateX(28px); opacity: 0; }
}

/* luz que segue o cursor */
.hero__cursor {
  position: absolute; z-index: 1; pointer-events: none;
  width: 460px; height: 460px; border-radius: 50%;
  left: var(--mx, 50%); top: var(--my, 40%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(96,165,250,.16) 0%, transparent 62%);
  opacity: 0; transition: opacity .5s ease;
}
.hero:hover .hero__cursor { opacity: 1; }

.hero__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 44px; align-items: center;
}

/* ---------- coluna de texto ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.selo i {
  width: 7px; height: 7px; border-radius: 50%; background: #60A5FA;
  box-shadow: 0 0 0 3px rgba(96,165,250,.24);
  animation: pisca 2.4s ease-in-out infinite;
}
@keyframes pisca { 50% { box-shadow: 0 0 0 6px rgba(96,165,250,.08); } }

.hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 800;
  letter-spacing: -.042em; color: #fff; line-height: 1.08;
}
.hero h1 span { display: block; }
/* as duas linhas entram separadas, com blur saindo de foco */
.hero__l1 { animation: entraLinha .9s cubic-bezier(.2,.8,.2,1) .1s backwards; }
.hero__l2 { animation: entraLinha .9s cubic-bezier(.2,.8,.2,1) .24s backwards; }
@keyframes entraLinha {
  from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(10px); }
}
/* o gradiente do título desliza devagar */
.hero h1 .grad {
  display: inline; background-size: 220% 100%;
  animation: desliza 8s ease-in-out infinite;
}
@keyframes desliza { 50% { background-position: 100% 0; } }

.hero__sub {
  margin: 18px 0 30px; font-size: .97rem; line-height: 1.7;
  color: rgba(255,255,255,.7); max-width: 50ch;
}
.hero__bts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

/* botão principal com brilho percorrendo */
.bt--brilho { position: relative; overflow: hidden; }
.bt--brilho::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -120%;
  width: 60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  animation: varre 4.2s ease-in-out infinite;
}
@keyframes varre { 0%, 55% { left: -120%; } 100% { left: 130%; } }
.bt--brilho:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 34px -14px rgba(37,99,235,.9); }
.bt--brilho svg { transition: transform var(--t); }
.bt--brilho:hover svg { transform: translateX(4px); }

.bt--vidro {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
.bt--vidro:hover {
  background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.36);
  transform: translateY(-2px);
}

.hero__ok { display: flex; gap: 24px; flex-wrap: wrap; font-size: .85rem; color: rgba(255,255,255,.64); }
.hero__ok li { display: inline-flex; align-items: center; gap: 8px; transition: color var(--t); }
.hero__ok li:hover { color: rgba(255,255,255,.92); }
.hero__ok svg { width: 16px; height: 16px; opacity: .8; }

/* ---------- painel suspenso ---------- */
/* A captura nova é bem larga (~2:1). A sangria à direita passa a sensação
   de que o painel continua além da tela, mas precisa encolher junto com o
   viewport: com valor fixo, notebooks cortavam a coluna do Assistente.
   O clamp vai de ~150px em telas largas até 0 perto de 1100px. */
.hero__palco {
  position: relative;
  margin-right: clamp(-150px, calc(1100px - 100vw), 0px);
  max-width: none; transform-style: preserve-3d;
}
/* Entre 1001 e 1440px o grid cede mais espaço ao painel, já que a coluna
   de texto não precisa de tanta largura. */
@media (min-width: 1001px) and (max-width: 1440px) {
  .hero__in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 30px; }
  .hero { padding: 118px 0 84px; }
}
/* flutuação lenta + inclinação 3D; o JS soma o parallax do mouse */
/* Duas camadas: a de fora só flutua (keyframes), a de dentro só inclina
   com o mouse. Separar evita que a animação e o parallax briguem pelo
   mesmo `transform` — problema clássico quando os dois disputam. */
.hero__flutua {
  position: relative; transform-style: preserve-3d;
  animation: flutua 7s ease-in-out infinite;
}
@keyframes flutua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
.hero__flutua > .hero__painel {
  transform:
    perspective(1600px)
    rotateY(calc(-7deg + var(--px, 0) * 3deg))
    rotateX(calc(2deg + var(--py, 0) * -2deg));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}

.hero__painel {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  /* Sombra em camadas: contato curto, difusa larga e um halo azul embaixo,
     que é o que dá a sensação de peça suspensa em vez de imagem colada. */
  box-shadow:
    0 2px 6px rgba(0,0,0,.5),
    0 18px 40px -18px rgba(0,0,0,.85),
    0 54px 96px -40px rgba(0,0,0,.95),
    0 0 0 1px rgba(96,165,250,.1),
    0 40px 110px -40px rgba(37,99,235,.75);
}
.hero__painel img { display: block; width: 100%; height: auto; }

/* Brilho que vaza por baixo do painel, reforçando a flutuação. */
.hero__painel::before {
  content: ''; position: absolute; z-index: 2;
  left: 8%; right: 8%; bottom: -26px; height: 46px;
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(59,130,246,.5), transparent 70%);
  filter: blur(18px);
  animation: heroRespira 7s ease-in-out infinite;
}
@keyframes heroRespira {
  0%, 100% { opacity: .75; transform: scaleX(1); }
  50%      { opacity: 1;   transform: scaleX(1.06); }
}

/* reflexo de vidro por cima do painel */
.hero__vidro {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(122deg,
    rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 22%,
    transparent 44%, transparent 100%);
}
/* faixa de luz que varre o painel de tempos em tempos */
.hero__scan {
  position: absolute; top: -40%; bottom: -40%; left: -60%; width: 34%;
  pointer-events: none; transform: rotate(16deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  animation: varrePainel 7s ease-in-out 1.2s infinite;
}
@keyframes varrePainel { 0%, 62% { left: -60%; } 100% { left: 130%; } }

/* ---------- satélites em órbita ---------- */
.sat {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px 11px 11px; border-radius: 15px;
  background: rgba(12,20,40,.66);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.8);
  transform: translateZ(60px);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.sat:hover {
  border-color: rgba(96,165,250,.45);
  box-shadow: 0 22px 50px -20px rgba(37,99,235,.7);
}
.sat__ic {
  position: relative; overflow: hidden;
  width: 34px; height: 34px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: #D6E3F5;
  /* Mesma linguagem dos cards de funcionalidades: vidro escuro e traço
     claro. A variação entre satélites é só de temperatura do fundo
     (--ic-h/--ic-s), sempre entre o azul-marinho e o grafite. */
  background:
    linear-gradient(150deg,
      hsl(var(--ic-h, 214) var(--ic-s, 30%) 30% / .92),
      hsl(var(--ic-h, 214) var(--ic-s, 30%) 18% / .92));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 12px -6px rgba(4,10,24,.8);
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.sat:hover .sat__ic {
  transform: scale(1.08);
  color: #FFFFFF;
  border-color: rgba(70,140,255,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 20px -8px rgba(4,10,24,.9),
    0 0 16px -6px rgba(70,140,255,.4);
}
.sat__ic svg { width: 17px; height: 17px; }
.sat__ic--azul  { --ic-h: 210; --ic-s: 34%; }
.sat__ic--verde { --ic-h: 216; --ic-s: 15%; }
.sat__ic--roxo  { --ic-h: 222; --ic-s: 34%; }
.sat__ic--ouro  { --ic-h: 212; --ic-s: 11%; }
.sat__txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.sat__txt em {
  font-style: normal; font-size: .68rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.52);
}
.sat__txt b {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: -.01em;
}
.pisca {
  width: 6px; height: 6px; border-radius: 50%; background: #60A5FA;
  box-shadow: 0 0 0 3px rgba(96,165,250,.2);
  animation: pisca 1.8s ease-in-out infinite;
}

/* posições e órbitas independentes */
.sat--1 { left: -7%;  top: 14%;  animation: orbita1 11s ease-in-out infinite; }
.sat--2 { left: -11%; top: 58%;  animation: orbita2 13s ease-in-out -2s infinite; }
.sat--3 { right: 12%; top: -5%;  animation: orbita2 12s ease-in-out -5s infinite; }
.sat--4 { left: 6%;   bottom: -6%; animation: orbita1 14s ease-in-out -7s infinite; }
@keyframes orbita1 {
  50% { transform: translateZ(60px) translate(10px, -18px); }
}
@keyframes orbita2 {
  50% { transform: translateZ(60px) translate(-12px, 16px); }
}

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .hero__in { grid-template-columns: 1fr; gap: 40px; }
  .hero__palco { margin-right: 0; max-width: 100%; }
  .hero__flutua { transform: none; animation: none; }
  .hero__painel { border-radius: 16px; }
  .hero__painel::before { bottom: -18px; height: 34px; }
  .sat--1 { left: -2%; top: 8%; }
  .sat--2 { left: -3%; top: auto; bottom: 14%; }
  .sat--3 { right: 2%; top: -4%; }
  .sat--4 { display: none; }
}
@media (max-width: 680px) {
  .hero { padding: 104px 0 72px; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .hero__bts .bt { width: 100%; justify-content: center; }
  .hero__ok { gap: 14px; font-size: .8rem; }
  .sat { padding: 8px 12px 8px 8px; border-radius: 12px; }
  .sat__ic { width: 28px; height: 28px; border-radius: 9px; }
  .sat__ic svg { width: 14px; height: 14px; }
  .sat__txt em { font-size: .6rem; }
  .sat__txt b { font-size: .82rem; }
  .sat--2, .sat--4 { display: none; }
}

/* menos movimento para quem pediu */
@media (prefers-reduced-motion: reduce) {
  .hero__malha, .hero__faixas::before, .hero__faixas::after, .hero__halo,
  .hero__part i, .hero__flutua, .hero__scan, .bt--brilho::after,
  .hero__painel::before,
  .sat, .hero h1 .grad, .selo i, .pisca {
    animation: none !important;
  }
  .hero__cursor { display: none; }
}

/* ---------------- seções ---------------- */
.sec { padding: 88px 0; }
.sec--alt { background: var(--bg2); }
.sec__h { text-align: center; max-width: 680px; margin: 0 auto 46px; }
.sec__h h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 800; letter-spacing: -.035em; }
.sec__h p { margin-top: 14px; color: var(--txt2); font-size: .98rem; }
.tag {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 6px 14px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul); background: var(--brilho);
  border: 1px solid color-mix(in srgb, var(--azul) 20%, transparent);
}
.tag svg { width: 13px; height: 13px; }

/* ---------------- módulos ---------------- */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mod {
  display: flex; flex-direction: column;
  padding: 26px 24px 22px; border-radius: var(--r-m);
  background: var(--surf); border: 1px solid var(--linha); box-shadow: var(--sombra);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.mod:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--azul) 40%, var(--linha)); box-shadow: var(--sombra-g); }
.mod__ic {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center;
}
.mod__ic svg { width: 20px; height: 20px; }
.mod__ic--azul  { background: var(--brilho); color: var(--azul); }
.mod__ic--roxo  { background: color-mix(in srgb, var(--roxo) 11%, transparent); color: var(--roxo); }
.mod__ic--verde { background: color-mix(in srgb, var(--verde) 12%, transparent); color: #16A34A; }
.mod__ic--ambar { background: color-mix(in srgb, var(--ambar) 13%, transparent); color: #D97706; }
.mod__ic--rosa  { background: color-mix(in srgb, var(--rosa) 11%, transparent); color: var(--rosa); }
.mod__ic--ciano { background: color-mix(in srgb, var(--ciano) 12%, transparent); color: #0891B2; }
.mod h3 { font-size: 1.04rem; font-weight: 700; margin-bottom: 9px; }
.mod p { font-size: .9rem; color: var(--txt2); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.mod__lk {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: .86rem; font-weight: 600; color: var(--azul);
  transition: gap var(--t);
}
.mod__lk:hover { gap: 10px; }
.mod__lk svg { width: 14px; height: 14px; }

/* ---------------- planos ---------------- */
/* Quatro colunas precisam de mais espaço que o wrap padrão. */
#planos > .wrap { max-width: 1320px; }
.planos {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) minmax(0,1.02fr);
  gap: 16px; align-items: start;
}
/* Todos começam na mesma altura: o selo "Mais popular" fica fora do fluxo,
   então não empurra o cartão destacado para baixo. */
.planos > * { height: 100%; }
.plano {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px; border-radius: var(--r-m);
  background: var(--surf); border: 1px solid var(--linha); box-shadow: var(--sombra);
  transition: transform var(--t), box-shadow var(--t);
}
.plano:hover { transform: translateY(-3px); box-shadow: var(--sombra-g); }
.plano--top { border-color: var(--azul); box-shadow: 0 0 0 3px var(--brilho), var(--sombra); }
.plano__selo {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 4px 13px; border-radius: 999px; white-space: nowrap;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: var(--azul);
}
.plano h3 { font-size: 1.12rem; font-weight: 700; }
.plano__sub { font-size: .84rem; color: var(--txt3); margin-top: 5px; }
.plano__p { display: flex; align-items: baseline; gap: 3px; margin: 18px 0 20px; }
.plano__p small { font-size: 1rem; font-weight: 600; color: var(--txt2); }
.plano__p b { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; }
.plano__p span { font-size: .88rem; color: var(--txt3); }
.plano__l { display: grid; gap: 10px; margin-bottom: 24px; flex: 1; }
.plano__l li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--txt2); }
.plano__l svg { width: 14px; height: 14px; flex: none; margin-top: 4px; color: var(--verde); }

/* cartão de chamada, ao lado dos planos */
.cta-lado {
  display: flex; flex-direction: column;
  padding: 30px 26px; border-radius: var(--r-m); color: #fff;
  background: linear-gradient(150deg, var(--escuro) 0%, var(--escuro2) 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 60px -30px rgba(11,17,32,.9);
}
.cta-lado h3 { font-size: 1.24rem; font-weight: 700; color: #fff; line-height: 1.3; }
.cta-lado > p { margin: 12px 0 20px; font-size: .89rem; color: rgba(255,255,255,.62); line-height: 1.6; }
.cta-lado ul { display: grid; gap: 11px; margin-bottom: 24px; flex: 1; }
.cta-lado li { display: flex; align-items: flex-start; gap: 9px; font-size: .87rem; color: rgba(255,255,255,.86); }
.cta-lado svg { width: 14px; height: 14px; flex: none; margin-top: 4px; color: var(--verde); }
.cta-lado small { display: block; margin-top: 13px; text-align: center; font-size: .76rem; color: rgba(255,255,255,.46); }

/* ---------------- compatibilidade ---------------- */
.compat { padding: 44px 0 52px; border-top: 1px solid var(--linha); }
.compat__t {
  text-align: center; margin-bottom: 26px;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul);
}
.compat__l {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.compat__i {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: var(--r-s);
  background: var(--surf); border: 1px solid var(--linha);
  font-size: .87rem; font-weight: 500; color: var(--txt2);
}
.compat__i svg { width: 20px; height: 20px; flex: none; color: var(--txt3); }

/* ---------------- faq ---------------- */
.faq { display: grid; gap: 10px; }
.faq__i {
  border-radius: var(--r-s); background: var(--surf);
  border: 1px solid var(--linha); overflow: hidden; transition: border-color var(--t);
}
.faq__i[open] { border-color: var(--azul); }
.faq__i summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 21px; cursor: pointer; list-style: none;
  font-size: .96rem; font-weight: 600;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary svg { width: 17px; height: 17px; flex: none; color: var(--txt3); transition: transform var(--t); }
.faq__i[open] summary svg { transform: rotate(180deg); color: var(--azul); }
.faq__i p { padding: 0 21px 19px; font-size: .91rem; color: var(--txt2); line-height: 1.7; }

/* ---------------- rodapé ---------------- */
.rp { border-top: 1px solid var(--linha); background: var(--bg2); padding: 50px 0 24px; }
.rp__in { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,2fr); gap: 42px; }
.rp .marca__t { color: var(--txt); }
.rp .marca__t i { color: var(--azul); }
.rp__marca p { margin-top: 13px; font-size: .89rem; color: var(--txt2); max-width: 34ch; }
.rp__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 26px; }
.rp__cols h4 {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--txt3); margin-bottom: 12px;
}
.rp__cols a { display: block; padding: 5px 0; font-size: .9rem; color: var(--txt2); }
.rp__cols a:hover { color: var(--azul); }
.rp__fim {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 38px; padding-top: 21px; border-top: 1px solid var(--linha);
  font-size: .84rem; color: var(--txt3);
}
/* Acesso ao console da plataforma. Mesmo peso visual dos demais itens
   do rodapé — presente para quem procura, discreto para quem não. */
.rp__fim-dir { display: inline-flex; align-items: center; gap: 18px; }
.rp__adm {
  color: var(--txt3); text-decoration: none;
  transition: color var(--t);
}
.rp__adm:hover { color: var(--txt2); text-decoration: underline; }

/* ---------------- visualizador ---------------- */
.lupa {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 34px;
  background: rgba(2,6,23,.93); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: apareceu .2s;
}
.lupa[hidden] { display: none; }
.lupa__box { margin: 0; max-width: 1320px; width: 100%; }
.lupa__box img {
  width: 100%; height: auto; border-radius: var(--r-m);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 100px -40px rgba(0,0,0,1);
  animation: sobe .3s cubic-bezier(.2,.8,.2,1);
}
.lupa__box figcaption { text-align: center; margin-top: 17px; color: #94A3B8; font-size: .93rem; }
.lupa__x, .lupa__nav {
  position: absolute; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; transition: background var(--t);
}
.lupa__x:hover, .lupa__nav:hover { background: rgba(255,255,255,.18); }
.lupa__x { top: 22px; right: 22px; width: 42px; height: 42px; border-radius: 11px; font-size: 1.5rem; line-height: 1; }
.lupa__nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; }
.lupa__nav svg { width: 20px; height: 20px; }
.lupa__nav--ant { left: 22px; }
.lupa__nav--prox { right: 22px; }

/* ---------------- animações ---------------- */
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }
@keyframes apareceu { from { opacity: 0; } }
.rise { animation: sobe .7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: var(--d, 0s); }

/* O selo pulsa uma vez ao entrar, chamando atenção sem irritar. */
.selo { animation: sobe .7s cubic-bezier(.2,.8,.2,1) backwards; }
.selo i { animation: pisca 2.6s ease-in-out infinite; }
@keyframes pisca {
  0%, 100% { box-shadow: 0 0 0 3px rgba(96,165,250,.24); }
  50%      { box-shadow: 0 0 0 7px rgba(96,165,250,.06); }
}

/* Botão principal com brilho que atravessa no hover. */
.hero__bts .bt--p { position: relative; overflow: hidden; }
.hero__bts .bt--p::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 180% 0;
  transition: background-position .7s ease;
}
.hero__bts .bt--p:hover::after { background-position: -60% 0; }
.re { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.re.vis { opacity: 1; transform: none; }

/* ---------------- responsivo ---------------- */
@media (max-width: 1180px) {
  .planos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cta-lado { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .fileira { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .hero { padding: 116px 0 76px; }
  .hero__in { grid-template-columns: 1fr; gap: 40px; }
  .hero__img { margin-right: 0; max-width: none; }
  .hero__img img { border-radius: 14px; }
  .mods { grid-template-columns: repeat(2, 1fr); }
  .rp__in { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  .topo__nav {
    position: fixed; left: 0; right: 0; top: 72px; margin: 0;
    flex-direction: column; gap: 2px; padding: 14px 20px 20px;
    background: var(--bg); border-bottom: 1px solid var(--linha);
    transform: translateY(-140%); transition: transform var(--t); z-index: -1;
  }
  .topo__nav.aberto { transform: none; }
  .topo__nav a { padding: 12px 14px; color: var(--txt2); }
  .topo__nav a:hover { background: var(--surf2); color: var(--txt); }
  .menu-btn { display: grid; place-items: center; }
  .lk { display: none; }
  .so-mini { display: block !important; }
}
@media (max-width: 720px) {
  .sec { padding: 60px 0; }
  .mods, .fileira, .planos { grid-template-columns: 1fr; }
  .plano--top { order: -1; }
  .hero__bts .bt { flex: 1; }
  .lupa { padding: 14px; }
  .lupa__nav { display: none; }
  .compat__i { flex: 1 1 100%; justify-content: center; }
  .rp__fim { justify-content: center; text-align: center; }
}
@media (max-width: 400px) {
  .topo__acoes .bt--p span { display: none; }
  .marca__t { font-size: .96rem; }
  .hero h1 { font-size: 1.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .re { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/* ============================================================
   TUDO INCLUSO — cartões de recurso
   Fundo levemente cinza com esferas desfocadas ao fundo, para a
   seção respirar sem competir com os cartões brancos.
   ============================================================ */
.incluso {
  position: relative; overflow: hidden;
  padding: 96px 0 104px; background: var(--bg2);
  border-top: 1px solid var(--linha);
}
.incluso__luz {
  position: absolute; pointer-events: none;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.10) 0%, transparent 68%);
  filter: blur(30px);
  left: -160px; top: -180px;
}
.incluso__luz--2 {
  left: auto; right: -200px; top: auto; bottom: -240px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(124,58,237,.08) 0%, transparent 68%);
}
/* malha de pontos discreta, sugerindo tecnologia */
.incluso__pontos {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, rgba(37,99,235,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 5%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 5%, transparent 70%);
}
.incluso > .wrap { position: relative; z-index: 1; }
.incluso .sec__h h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.incluso .sec__h p { font-size: 1.04rem; max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ---------- números ---------- */
.numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin: 0 auto 44px; max-width: 900px;
}
.numeros__i {
  text-align: center; padding: 18px 14px; border-radius: var(--r-m);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--linha);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.numeros__i b {
  display: block; font-size: 1.7rem; font-weight: 800;
  letter-spacing: -.035em; line-height: 1.1;
  background: linear-gradient(120deg, var(--azul), #7C3AED);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.numeros__i span { font-size: .82rem; color: var(--txt2); }

/* ---------- grade de cartões (compacta) ---------- */
.cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 22px 18px; border-radius: 20px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 14px 32px -26px rgba(15,23,42,.26);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform 250ms cubic-bezier(.2,.8,.2,1),
              box-shadow 250ms cubic-bezier(.2,.8,.2,1),
              border-color 250ms ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.34);
  box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 26px 52px -26px rgba(37,99,235,.4);
}

/* topo: ícone, título e selo na mesma linha */
.card__top {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: 11px; margin-bottom: 12px;
}
/* Ícones dos cards: um único sistema visual.
   Antes cada card tinha um gradiente saturado próprio (verde, âmbar, rosa,
   teal...), o que fazia os ícones competirem com os títulos. Agora todos
   compartilham vidro escuro + traço claro; a única variação é a temperatura
   do fundo, definida em --ic-h/--ic-s por card, e ela é sutil de propósito. */
.card__ic {
  position: relative; overflow: hidden;
  width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center;
  color: #D6E3F5;
  background:
    linear-gradient(150deg,
      hsl(var(--ic-h, 214) var(--ic-s, 30%) 26% / .92),
      hsl(var(--ic-h, 214) var(--ic-s, 30%) 15% / .92));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 12px -6px rgba(4,10,24,.7);
  transition:
    transform 350ms cubic-bezier(.16,.84,.28,1),
    border-color 350ms ease,
    box-shadow 350ms ease,
    color 350ms ease,
    background 350ms ease;
}
.card__ic svg {
  position: relative; z-index: 1;
  width: 19px; height: 19px;
  transition: transform 350ms cubic-bezier(.16,.84,.28,1);
}

/* reflexo que atravessa o vidro no hover */
.card__ic::after {
  content: ''; position: absolute; z-index: 0;
  top: -60%; bottom: -60%; left: -75%; width: 45%;
  pointer-events: none; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  opacity: 0; transition: opacity 200ms ease;
}
.card:hover .card__ic::after { opacity: 1; animation: icBrilho 900ms ease-out; }
@keyframes icBrilho { from { left: -75%; } to { left: 130%; } }

.card:hover .card__ic {
  transform: translateY(-3px) scale(1.03);
  color: #FFFFFF;
  border-color: rgba(70,140,255,.30);
  background:
    linear-gradient(150deg,
      hsl(var(--ic-h, 214) var(--ic-s, 30%) 32% / .95),
      hsl(var(--ic-h, 214) var(--ic-s, 30%) 19% / .95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 24px -10px rgba(4,10,24,.8),
    0 0 18px -6px rgba(70,140,255,.35);
}
.card:hover .card__ic svg { transform: scale(1.05); }

/* Variação só na temperatura do fundo — todas vizinhas na roda de cores,
   entre o azul-marinho (222) e o cinza-grafite (208), com saturação baixa. */
.card__ic--0 { --ic-h: 210; --ic-s: 34%; }  /* atendimentos — azul petróleo */
.card__ic--1 { --ic-h: 216; --ic-s: 16%; }  /* contatos     — cinza azulado */
.card__ic--2 { --ic-h: 222; --ic-s: 36%; }  /* agenda       — azul profundo */
.card__ic--3 { --ic-h: 212; --ic-s: 10%; }  /* visitas      — grafite */
.card__ic--4 { --ic-h: 220; --ic-s: 30%; }  /* lembretes    — azul escuro */
.card__ic--5 { --ic-h: 214; --ic-s: 13%; }  /* apoiadores   — cinza premium */
.card__ic--6 { --ic-h: 224; --ic-s: 32%; }  /* locais       — azul marinho */
.card__ic--7 { --ic-h: 208; --ic-s: 11%; }  /* no celular   — grafite */

/* No tema claro o vidro escuro ficaria pesado: inverte para vidro claro.
   Ressalva: a seção "tudo incluso" é escura mesmo com data-tema="claro",
   então o :not() abaixo impede que esta regra a alcance. */
[data-tema="claro"] :not(.sec--escura) > * > .cards .card__ic,
[data-tema="claro"] .sec--clara .card__ic {
  color: #33507D;
  background:
    linear-gradient(150deg,
      hsl(var(--ic-h, 214) var(--ic-s, 30%) 96%),
      hsl(var(--ic-h, 214) var(--ic-s, 30%) 90%));
  border-color: rgba(15,23,42,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 4px 12px -8px rgba(15,23,42,.3);
}
[data-tema="claro"] :not(.sec--escura) > * > .cards .card:hover .card__ic,
[data-tema="claro"] .sec--clara .card:hover .card__ic {
  color: #1D4ED8; border-color: rgba(37,99,235,.28);
}

.card h3 {
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.25; margin: 0;
}
.card__selo {
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: .63rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--azul); background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.16);
  transition: box-shadow 250ms ease;
}
.card:hover .card__selo { box-shadow: 0 0 0 3px rgba(37,99,235,.08); }

.card p {
  font-size: .89rem; line-height: 1.5; color: var(--txt2);
  flex: 1; margin-bottom: 14px;
}
.card__pe {
  display: flex; align-items: center; gap: 7px;
  padding-top: 12px; border-top: 1px solid rgba(15,23,42,.07);
  font-size: .76rem; font-weight: 500; color: var(--txt3);
}
.card__pe svg { width: 13px; height: 13px; flex: none; color: var(--verde); }

/* botão "ver todas" */
.cards__mais { display: flex; justify-content: center; margin-top: 32px; }
.cards__mais .bt { padding: 13px 26px; font-size: .92rem; }
.cards__mais svg { transition: transform 250ms ease; }
.cards__mais .bt:hover svg { transform: translateY(2px); }

@media (max-width: 1180px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .incluso { padding: 68px 0 74px; }
  .cards { grid-template-columns: 1fr; }
  .card { padding: 26px 22px 20px; border-radius: 20px; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   DEMONSTRAÇÃO — vitrine editorial premium
   ============================================================ */
.demo {
  position: relative; overflow: hidden;
  padding: 120px 0 128px; background: #fff;
}
/* Iluminação ambiente atrás da moldura: dois círculos desfocados que
   respiram fora de fase. Ficam bem discretos — a ideia é dar profundidade
   ao fundo branco, não competir com o dashboard. */
.demo::before,
.demo::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(90px);
}
.demo::before {
  left: -12%; top: 22%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(88,101,242,.13), transparent 68%);
  animation: demoOrbe 22s ease-in-out infinite;
}
.demo::after {
  right: -10%; bottom: 6%; width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(124,58,237,.1), transparent 68%);
  animation: demoOrbe 27s ease-in-out -8s infinite;
}
@keyframes demoOrbe {
  0%, 100% { opacity: .6; transform: translate(0, 0) scale(1); }
  50%      { opacity: 1;  transform: translate(30px, -24px) scale(1.1); }
}
.demo__luz {
  position: absolute; left: 50%; top: -160px; transform: translateX(-50%);
  width: 1100px; height: 700px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(37,99,235,.07) 0%, rgba(124,58,237,.045) 38%, transparent 68%);
  filter: blur(40px);
}
.demo > .wrap { position: relative; z-index: 1; }
.demo .sec__h { max-width: 720px; margin-bottom: 36px; }
.demo .sec__h h2 {
  font-size: clamp(2rem, 4vw, 3.05rem); line-height: 1.1;
  letter-spacing: -.04em; font-weight: 800;
}
.demo .sec__h p { margin-top: 18px; font-size: 1.03rem; line-height: 1.65; color: #6B7280; }

/* ---------- barra premium ---------- */
.barra {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px; margin: 0 auto 64px;
}
.barra__i {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px 10px 12px; border-radius: 999px;
  font-size: .855rem; font-weight: 500; color: #4B5563;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.07);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
  transition: transform 300ms cubic-bezier(.2,.8,.2,1),
              box-shadow 300ms ease, border-color 300ms ease, color 300ms ease;
}
.barra__i:hover {
  transform: translateY(-2px); color: #111827;
  border-color: rgba(37,99,235,.24);
  box-shadow: 0 10px 26px -14px rgba(37,99,235,.5);
}
.barra__ic {
  width: 26px; height: 26px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: #2563EB;
  background: linear-gradient(140deg, rgba(37,99,235,.12), rgba(124,58,237,.12));
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
}
.barra__ic svg { width: 14px; height: 14px; }
.barra__i:hover .barra__ic { transform: rotate(-8deg) scale(1.08); }

/* ---------- layout editorial ---------- */
/* ============================================================
   JANELA DO SISTEMA
   Sidebar e mockup dividem um único container, como uma janela de
   aplicativo desktop. A separação entre os dois é só uma linha
   translúcida — o objetivo é que pareça uma peça só, não dois blocos.
   ============================================================ */
.app {
  position: relative; overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #0D1227 0%, #121936 100%);
  border: 1px solid rgba(255,255,255,.08);
  /* Sombra difusa larga + halo azul: iluminação indireta, não contorno.
     A moldura só dá contexto; quem deve chamar atenção é o dashboard. */
  box-shadow:
    0 40px 120px rgba(17,24,39,.30),
    0 0 80px rgba(88,101,242,.12),
    inset 0 1px 0 rgba(255,255,255,.07);
  /* perspectiva sutil, o suficiente para dar profundidade */
  transform: perspective(2400px) rotateX(2deg) rotateY(-2deg);
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.22,1,.36,1),
              box-shadow 700ms cubic-bezier(.22,1,.36,1);
}
/* ao aproximar o cursor, a peça se endireita e o halo abre */
.app:hover {
  transform: perspective(2400px) rotateX(0deg) rotateY(0deg);
  box-shadow:
    0 48px 140px rgba(17,24,39,.36),
    0 0 110px rgba(88,101,242,.2),
    inset 0 1px 0 rgba(255,255,255,.09);
}
/* reflexo de vidro escorrendo do topo */
.app::before {
  content: ''; position: absolute; z-index: 1;
  left: 0; right: 0; top: 0; height: 160px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
/* granulado leve, para o gradiente não parecer plástico */
.app::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* iluminação ambiente azul, respirando devagar */
.app__luz {
  position: absolute; z-index: 0; pointer-events: none;
  left: -6%; top: -18%; width: 620px; height: 520px; filter: blur(30px);
  background: radial-gradient(circle, rgba(56,98,255,.3) 0%, transparent 66%);
  animation: appLuz 16s ease-in-out infinite;
}
@keyframes appLuz {
  0%, 100% { opacity: .6; transform: translate(0, 0) scale(1); }
  50%      { opacity: 1;  transform: translate(24px, 16px) scale(1.08); }
}
/* linhas de grade quase imperceptíveis, com deriva lenta */
.app__grade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 5%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 5%, transparent 75%);
  animation: appGrade 32s linear infinite;
}
@keyframes appGrade { to { background-position: 46px 46px, 46px 46px; } }

/* barra de status no topo da janela */
/* Barra de 44px, translúcida, no espírito do Arc/Raycast: indicadores
   discretos, marca pequena e status. Nada de abas. */
.app__barra {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 11px;
  height: 44px; padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.022);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.app__pontos { display: inline-flex; gap: 5px; }
.app__pontos i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.13);
}
.app__nome {
  font-size: .74rem; font-weight: 600; letter-spacing: -.005em;
  color: rgba(255,255,255,.5);
}
.app__online {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 4px 10px; border-radius: 999px;
  font-size: .66rem; font-weight: 600; letter-spacing: .04em;
  color: #93C5FD; background: rgba(96,165,250,.09);
  border: 1px solid rgba(96,165,250,.17);
}
.app__online i {
  width: 5px; height: 5px; border-radius: 50%; background: #60A5FA;
  box-shadow: 0 0 0 2.5px rgba(96,165,250,.18);
  animation: pisca 2s ease-in-out infinite;
}

/* corpo: sidebar mais estreita (~35% menor) + palco maior */
.app__corpo {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  align-items: stretch;
}

/* ---------- sidebar ---------- */
.ed__lista {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 9px;
  border-right: 1px solid rgba(255,255,255,.06);
}

.ed__item {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 10px 10px 14px; border-radius: 13px; cursor: pointer;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  /* entra deslizando da esquerda, com o blur saindo de foco */
  animation: edEntra 800ms cubic-bezier(.22,1,.36,1) var(--d, 0s) backwards;
  transition:
    transform 300ms cubic-bezier(.22,1,.36,1),
    border-color 300ms cubic-bezier(.22,1,.36,1),
    box-shadow 300ms cubic-bezier(.22,1,.36,1),
    background 300ms cubic-bezier(.22,1,.36,1);
}
@keyframes edEntra {
  from { opacity: 0; transform: translateX(-18px); filter: blur(6px); }
}

/* barra luminosa vertical do item ativo */
.ed__item::before {
  content: ''; position: absolute; left: 5px; top: 50%;
  width: 3px; height: 0; border-radius: 20px;
  transform: translateY(-50%); pointer-events: none;
  background: linear-gradient(180deg, #4F7BFF, #7A96FF);
  box-shadow: 0 0 14px rgba(90,120,255,.7);
  transition: height 420ms cubic-bezier(.22,1,.36,1), opacity 300ms ease;
  opacity: 0;
}
.ed__item.on::before { height: 56%; opacity: 1; }

.ed__item:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 24px -14px rgba(4,10,24,.9), 0 0 16px -8px rgba(85,120,255,.4);
}

.ed__item.on {
  background: linear-gradient(120deg, rgba(23,42,92,.9), rgba(14,25,54,.85));
  border-color: rgba(85,120,255,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(85,120,255,.14),
    0 8px 30px -14px rgba(56,98,255,.7);
  animation: edRespira 4.5s ease-in-out 1s infinite;
}
/* o item ativo "respira": glow que cresce e recolhe muito devagar */
@keyframes edRespira {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
                         0 0 0 1px rgba(85,120,255,.14),
                         0 8px 30px -14px rgba(56,98,255,.7); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.1),
                         0 0 0 1px rgba(85,120,255,.26),
                         0 10px 38px -12px rgba(56,98,255,.95); }
}

.ed__ic {
  position: relative; z-index: 1;
  width: 31px; height: 31px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #C7D3EE;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: background 300ms ease, color 300ms ease,
              transform 300ms cubic-bezier(.22,1,.36,1), border-color 300ms ease;
}
.ed__ic svg { width: 16px; height: 16px; }
.ed__item:hover .ed__ic { color: #fff; transform: scale(1.05); }
.ed__item.on .ed__ic {
  color: #fff;
  background: linear-gradient(180deg, rgba(45,80,190,.8), rgba(30,54,130,.8));
  border-color: rgba(140,165,255,.28);
  /* o ícone do item ativo flutua devagar */
  animation: edFlutua 5s ease-in-out infinite;
}
@keyframes edFlutua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.ed__txt {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
}
.ed__txt strong {
  font-size: .875rem; font-weight: 600; color: #FFFFFF; letter-spacing: -.012em;
}
.ed__txt em {
  font-style: normal; font-size: .775rem; font-weight: 400; line-height: 1.45;
  color: rgba(255,255,255,.7);
}

.ed__seta {
  position: relative; z-index: 1;
  width: 15px; height: 15px; flex: none; color: rgba(255,255,255,.25);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(.22,1,.36,1), color 300ms ease;
}
.ed__item:hover .ed__seta, .ed__item.on .ed__seta { opacity: 1; transform: none; }
.ed__item.on .ed__seta { color: #7A96FF; }

/* ondulação no clique, presa ao ponto tocado pelo JS */
.ed__onda {
  position: absolute; z-index: 0; border-radius: 50%;
  pointer-events: none; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(126,158,255,.3), transparent 66%);
  animation: edOnda 620ms cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes edOnda {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---------- palco do mockup ---------- */
.ed__palco {
  position: relative; overflow: hidden;
  /* As capturas agora vêm todas em 1.30 (1440x1107). O palco acompanha essa
     proporção para que o object-fit: cover corte quase nada — antes, em
     16/10, ele comia cerca de um quinto da altura de cada tela. */
  aspect-ratio: 1.36/1; background: #0B1120;
  transition: box-shadow 420ms cubic-bezier(.2,.8,.2,1);
}
.ed__palco::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(122deg,
    rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 22%, transparent 46%);
}

.ed__quadro {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  opacity: 0; visibility: hidden;
  transform: scale(1.015); filter: blur(6px);
  transition: opacity 460ms cubic-bezier(.2,.8,.2,1),
              transform 620ms cubic-bezier(.2,.8,.2,1),
              filter 460ms ease, visibility 0s linear 460ms;
}
.ed__quadro.on {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition-delay: 0s;
}
.ed__quadro img {
  width: 100%; height: 100%; object-fit: cover; object-position: top left;
  transition: transform 620ms cubic-bezier(.2,.8,.2,1);
}
.ed__palco:hover .ed__quadro.on img { transform: scale(1.03); }

.ed__selo {
  position: absolute; top: 16px; left: 16px; z-index: 4;
  padding: 6px 13px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(11,17,32,.66);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
}
.ed__lupa {
  position: absolute; right: 16px; bottom: 16px; z-index: 4;
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  background: rgba(11,17,32,.56);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(.2,.8,.2,1);
}
.ed__lupa svg { width: 17px; height: 17px; }
.ed__palco:hover .ed__lupa { opacity: 1; transform: none; }

/* ---------- responsivo ---------- */
/* Tablet: a sidebar encolhe para só os ícones — o texto sairia apertado
   e o mockup precisa da largura para continuar legível. */
@media (max-width: 1100px) and (min-width: 861px) {
  .app__corpo { grid-template-columns: 76px minmax(0, 1fr); }
  .ed__lista { padding: 14px 10px; align-items: center; }
  .ed__item { justify-content: center; padding: 11px 8px; gap: 0; }
  .ed__txt, .ed__seta { display: none; }
  .ed__item::before { left: 2px; }
}
/* Celular: vira lista rolável na horizontal acima do mockup. */
@media (max-width: 860px) {
  /* No celular a perspectiva distorce mais do que ajuda: a peça ocupa a
     largura toda e a inclinação vira desalinhamento visível. */
  .app {
    border-radius: 22px; transform: none;
    box-shadow: 0 24px 60px rgba(17,24,39,.28), 0 0 50px rgba(88,101,242,.1);
  }
  .app:hover { transform: none; }
  .app__corpo { grid-template-columns: 1fr; }
  .ed__lista {
    flex-direction: row; overflow-x: auto; gap: 8px;
    padding: 12px; border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    scrollbar-width: none; scroll-snap-type: x mandatory;
  }
  .ed__lista::-webkit-scrollbar { display: none; }
  .ed__lista li { flex: none; scroll-snap-align: start; }
  .ed__item { width: auto; padding: 10px 14px 10px 16px; }
  .ed__txt em, .ed__seta { display: none; }
  .ed__txt strong { white-space: nowrap; }
  .ed__item::before { left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .app, .app:hover { transform: none; }
  .demo::before, .demo::after { animation: none !important; }
  .app__luz, .app__grade, .app__online i,
  .ed__item, .ed__item.on, .ed__item.on .ed__ic {
    animation: none !important;
  }
}

/* ---------- bloco final de conversão ---------- */
.cta {
  /* A timeline horizontal ficava entre a moldura e este bloco. Sem ela, o
     respiro precisa vir da própria margem, senão o CTA cola no mockup. */
  position: relative; overflow: hidden; margin-top: 104px;
  border-radius: 28px; text-align: center;
  background: linear-gradient(140deg, #1D4ED8 0%, #2563EB 42%, #7C3AED 100%);
  box-shadow: 0 40px 90px -46px rgba(37,99,235,.75);
}
.cta__luz {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 15% 0%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 100%, rgba(255,255,255,.12), transparent 62%);
}
.cta__in { position: relative; z-index: 1; padding: 64px 32px 58px; }
.cta h3 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800;
  letter-spacing: -.035em; color: #fff; line-height: 1.18;
}
.cta > .cta__in > p {
  margin: 14px auto 30px; max-width: 520px;
  font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.8);
}
.cta__bts { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.bt--branco {
  color: #1D4ED8; background: #fff; border-color: #fff;
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.55);
}
.bt--branco:hover { background: #F1F5FF; transform: translateY(-2px); }
.cta__selos {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px 22px; margin-top: 28px;
}
.cta__selos li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .845rem; font-weight: 500; color: rgba(255,255,255,.78);
}
.cta__selos svg { width: 14px; height: 14px; flex: none; color: #86EFAC; }

/* ---------- responsivo ---------- */
/* O responsivo da janela do sistema fica junto do bloco .app, acima. */
@media (max-width: 680px) {
  .demo { padding: 74px 0 82px; }
  .barra { gap: 8px; margin-bottom: 40px; }
  .barra__i { font-size: .78rem; padding: 8px 14px 8px 9px; }
  .cta { margin-top: 48px; border-radius: 22px; }
  .cta__in { padding: 46px 22px 42px; }
  .cta__bts .bt { width: 100%; }
}

/* Notebooks de 768px de altura (1366x768 é comum): reduz o respiro do
   hero para ele caber na primeira dobra sem rolagem. */
@media (min-width: 1000px) and (max-height: 820px) {
  .hero { padding: 108px 0 62px; }
  .hero h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
  .hero__sub { margin: 15px 0 22px; font-size: .92rem; }
  .hero__bts { margin-bottom: 22px; }
  .hero .selo { margin-bottom: 18px; }
}

/* ============================================================
   BOTÃO DE ACESSO — só aparece para quem já tem sessão
   ============================================================ */
.bt-adm {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  height: 44px; padding: 0 20px; border-radius: 14px;
  font-size: .89rem; font-weight: 600; white-space: nowrap;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 250ms ease, border-color 250ms ease,
              box-shadow 250ms ease, color 250ms ease;
}
.bt-adm svg {
  width: 17px; height: 17px; flex: none; color: var(--azul-c);
  transition: transform 250ms cubic-bezier(.2,.8,.2,1);
}
.bt-adm:hover {
  background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.45);
  box-shadow: 0 6px 18px -8px rgba(37,99,235,.6);
}
.bt-adm:hover svg { transform: translateX(2px); }

/* O topo agora continua escuro ao rolar, então o botão mantém o
   tratamento claro sobre vidro em vez de virar branco. */
.topo.rolou .bt-adm {
  color: #E8EDF7; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16);
}
.topo.rolou .bt-adm svg { color: var(--azul-c); }
.topo.rolou .bt-adm:hover {
  background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.45); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(37,99,235,.6);
}

/* variante do administrador da plataforma */
.bt-adm--master {
  color: #fff;
  background: linear-gradient(135deg, var(--azul), #1D4ED8);
  border-color: transparent;
  box-shadow: 0 8px 22px -10px rgba(37,99,235,.85);
}
.bt-adm--master svg { color: #fff; }
.bt-adm--master:hover {
  background: linear-gradient(135deg, #1D4ED8, #1E40AF);
  border-color: transparent;
  box-shadow: 0 12px 28px -10px rgba(37,99,235,1);
}
.topo.rolou .bt-adm--master {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--azul), #1D4ED8);
}
.topo.rolou .bt-adm--master svg { color: #fff; }

.bt-adm__selo {
  padding: 2px 8px; border-radius: 999px; margin-left: 2px;
  font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.22);
}

/* abaixo de 992px fica só o ícone, com o rótulo acessível ao leitor de tela */
@media (max-width: 992px) {
  .bt-adm { padding: 0 13px; gap: 0; }
  .bt-adm__t, .bt-adm__selo { display: none; }
  .bt-adm svg { width: 18px; height: 18px; }
}
@media (max-width: 400px) {
  .bt-adm { display: none; }   /* espaço não comporta; o menu tem o link */
}

/* ============================================================
   MODAL — todas as funcionalidades
   ============================================================ */
.todas {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center; padding: 28px;
}
.todas[hidden] { display: none; }
.todas__fundo {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(2,6,23,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: apareceu .2s;
}
.todas__box {
  position: relative; z-index: 1;
  width: 100%; max-width: 1000px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.6);
  animation: sobe .3s cubic-bezier(.2,.8,.2,1);
}
.todas__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 30px 34px 24px; border-bottom: 1px solid var(--linha2); flex: none;
}
.todas__head h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin: 4px 0 8px; }
.todas__head p { font-size: .93rem; color: var(--txt2); }
.todas__x {
  width: 38px; height: 38px; border-radius: 11px; flex: none; cursor: pointer;
  display: grid; place-items: center; font-size: 1.45rem; line-height: 1;
  background: var(--surf2); border: 1px solid var(--linha); color: var(--txt2);
  transition: color 250ms ease, border-color 250ms ease;
}
.todas__x:hover { color: var(--txt); border-color: var(--azul); }

.todas__corpo {
  flex: 1; overflow-y: auto; padding: 28px 34px 30px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px 34px;
  align-content: start;
}
.todas__cat h3 {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul);
}
.todas__cat h3 span {
  padding: 1px 8px; border-radius: 999px; letter-spacing: 0;
  font-size: .7rem; color: var(--txt3);
  background: var(--surf2); border: 1px solid var(--linha);
}
.todas__cat ul { display: grid; gap: 10px; }
.todas__cat li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9rem; line-height: 1.5; color: var(--txt2);
}
.todas__cat svg { width: 14px; height: 14px; flex: none; margin-top: 4px; color: var(--verde); }

.todas__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; padding: 20px 34px; flex: none;
  border-top: 1px solid var(--linha2); background: var(--bg2);
}
.todas__foot span { font-size: .87rem; color: var(--txt2); }

@media (max-width: 680px) {
  .todas { padding: 0; place-items: end stretch; }
  .todas__box { max-width: none; max-height: 92vh; border-radius: 24px 24px 0 0; }
  .todas__head { padding: 24px 20px 18px; }
  .todas__corpo { padding: 22px 20px 24px; grid-template-columns: 1fr; gap: 24px; }
  .todas__foot { padding: 16px 20px; justify-content: center; text-align: center; }
  .todas__foot .bt { width: 100%; }
}

/* ============================================================
   SEÇÕES ESCURAS
   A página alterna claro e escuro, dando ritmo à leitura. Os
   componentes internos herdam as cores por variável, então basta
   redefinir os tokens dentro do bloco escuro.
   ============================================================ */
.sec--escura {
  --surf:   rgba(255,255,255,.045);
  --surf2:  rgba(255,255,255,.06);
  --linha:  rgba(255,255,255,.1);
  --linha2: rgba(255,255,255,.07);
  --txt:    #FFFFFF;
  --txt2:   #94A3B8;
  --txt3:   #64748B;
  --brilho: rgba(96,165,250,.14);

  position: relative;
  background: linear-gradient(180deg, #070B14 0%, #0B1120 50%, #080D1A 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--txt);
}
.sec--escura h2, .sec--escura h3 { color: #fff; }
.sec--escura .sec__h p { color: var(--txt2); }

/* o gradiente do título usa tons mais claros no escuro */
.sec--escura .grad {
  background: linear-gradient(100deg, #60A5FA, #A78BFA 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* etiqueta */
.sec--escura .tag {
  color: #93C5FD; background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.24);
}

/* esferas de fundo mais intensas sobre o escuro */
.sec--escura .incluso__luz {
  background: radial-gradient(circle, rgba(37,99,235,.22) 0%, transparent 68%);
}
.sec--escura .incluso__luz--2 {
  background: radial-gradient(circle, rgba(124,58,237,.18) 0%, transparent 68%);
}
.sec--escura .incluso__pontos {
  background-image: radial-gradient(circle, rgba(96,165,250,.2) 1px, transparent 1px);
  opacity: .35;
}

/* números */
.sec--escura .numeros__i {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
.sec--escura .numeros__i b {
  background: linear-gradient(120deg, #60A5FA, #A78BFA);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* cartões de recurso */
.sec--escura .card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 36px -28px rgba(0,0,0,.9);
}
.sec--escura .card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(96,165,250,.42);
  box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 28px 54px -26px rgba(37,99,235,.55);
}
.sec--escura .card h3 { color: #fff; }
.sec--escura .card p { color: var(--txt2); }
.sec--escura .card__selo {
  color: #93C5FD; background: rgba(96,165,250,.13);
  border-color: rgba(96,165,250,.24);
}
.sec--escura .card:hover .card__selo { box-shadow: 0 0 0 3px rgba(96,165,250,.12); }
.sec--escura .card__pe {
  color: var(--txt3); border-top-color: rgba(255,255,255,.08);
}

/* botão "ver todas" */
.sec--escura .bt--s {
  color: #fff; background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.17);
}
.sec--escura .bt--s:hover {
  background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.45); color: #fff;
}

/* faixa de compatibilidade */
.sec--escura.compat { padding: 52px 0 58px; }
.sec--escura .compat__t { color: #93C5FD; }
.sec--escura .compat__i {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: var(--txt2);
}
.sec--escura .compat__i svg { color: #60A5FA; }

/* a seção clara seguinte precisa de contraste com a escura */
.demo { border-bottom: 1px solid var(--linha); }

/* As seções claras precisam de fundo explícito: sem ele ficam
   transparentes e a alternância não aparece. */
.demo, #planos, #faq { background: #fff; }
#planos { position: relative; }

/* O rodapé fecha a alternância: vem depois do FAQ claro, então é escuro. */
.rp {
  --surf2: rgba(255,255,255,.06);
  --linha: rgba(255,255,255,.09);
  --txt:   #FFFFFF;
  --txt2:  #94A3B8;
  --txt3:  #64748B;
  background: linear-gradient(180deg, #070B14 0%, #04070E 100%);
  border-top: 1px solid rgba(255,255,255,.07);
}
.rp .marca__t { color: #fff; }
.rp .marca__t i { color: #60A5FA; }
.rp__marca p { color: var(--txt2); }
.rp__cols h4 { color: var(--txt3); }
.rp__cols a { color: var(--txt2); }
.rp__cols a:hover { color: #60A5FA; }
.rp__fim { color: var(--txt3); border-top-color: rgba(255,255,255,.07); }

/* ---------- demonstração no tema escuro ---------- */
.tema-escuro .demo, [data-tema="escuro"] .demo { background: var(--bg); }
.tema-escuro .barra__i, [data-tema="escuro"] .barra__i {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); color: var(--txt2);
}
/* O menu lateral já nasce escuro nos dois temas — as regras antigas de
   tema escuro foram removidas porque sobrescreviam o novo visual. */

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  .ed__quadro, .ed__quadro img, .ed__item, .ed__ic, .barra__i, .barra__ic {
    transition-duration: .01ms !important;
  }
}