/* A PAGINA DE ENTRADA DO D'MOBIX (15/10/2026)
   Duas reguas do Eder. A do Bling para a ordem das coisas -- abertura, os
   sistemas, recursos, para quem e', chamada --; e a da Supercell para o
   capricho: *"faz o cara querer clicar nas coisas"*. No alto, os quatro
   sistemas voando, cada um com a sua previa viva; o clique leva a' secao, e
   la' o sistema esta' numa janela do app que responde ao toque. A cara e' a do app: Manrope,
   a barra escura de cima, os icones redondos com as cores de cada sistema. O escuro com
   vidro e brilho ciano da versao anterior ele chamou de "cara de IA" -- nao
   volta. Muitas regras por linha, como o resto do projeto. */
:root{
  --fundo:#f4f7f8; --cartao:#fff; --cartao-2:#f7fafb; --tinta:#11191d; --media:#4d5b64; --fraca:#74818b;
  --linha:#e3e9ec; --linha-forte:#d3dde2; --ciano:#00a9d2; --ciano-forte:#008fb6; --ciano-claro:#16cee2; --ciano-veu:#e5f8fb;
  --bom:#2f9b60; --bom-veu:#e8f8ef; --aviso:#a87421; --aviso-veu:#fff5df; --barra-do-app:#0d1b21;
  --corpo:"Manrope",system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --raio:18px; --raio-p:12px; --pilula:999px; --limite:1180px;
  --curva:cubic-bezier(.22,1,.36,1); --mola:cubic-bezier(.34,1.56,.64,1);
  --alto:0 14px 36px -18px rgba(17,25,29,.32); --janela:0 1px 2px rgba(17,25,29,.06),0 30px 70px -34px rgba(17,25,29,.42),0 80px 140px -70px rgba(0,120,150,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--fundo);color:var(--tinta);font-family:var(--corpo);font-size:16px;line-height:1.55;margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
button{font:inherit}
[hidden]{display:none!important}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.limite{margin:0 auto;max-width:var(--limite);padding:0 24px}
.num{font-variant-numeric:tabular-nums}
.so-leitor{clip:rect(0 0 0 0);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
.titulo-secao{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:0 0 14px;max-width:24ch;text-wrap:balance}
.secao-sub{color:var(--media);font-size:17px;margin:0 0 32px;max-width:60ch}

/* ---------- botoes: afundam no clique, voltam com mola ---------- */
.botao{align-items:center;border:1.5px solid transparent;border-radius:var(--pilula);cursor:pointer;display:inline-flex;font-size:15.5px;font-weight:750;gap:8px;justify-content:center;min-height:50px;padding:0 24px;text-decoration:none;transition:transform .35s var(--mola),filter .18s ease,background .18s ease,box-shadow .2s ease;white-space:nowrap}
.botao svg{height:18px;transition:transform .3s var(--mola);width:18px}
.botao:hover svg{transform:translateX(3px)}
.botao:active{transform:scale(.96);transition-duration:.08s}
.botao.forte{background:var(--ciano);box-shadow:0 10px 22px -12px rgba(0,169,210,.9),inset 0 1px 0 rgba(255,255,255,.25);color:#fff}
.botao.forte:hover{filter:brightness(1.07)}
.botao.vazado{border-color:var(--linha-forte);color:var(--tinta);background:#fff}
.botao.vazado:hover{border-color:var(--tinta)}
/* o comercial e' no WhatsApp, entao o botao tem a cor dele (16/10/2026, ele:
   *"melhor deixar verde esse botao"*). Verde mais fundo que o da marca do
   WhatsApp: o texto branco precisa ler bem. */
.botao.whats{background:#1c9f52;box-shadow:0 10px 22px -12px rgba(28,159,82,.9),inset 0 1px 0 rgba(255,255,255,.25);color:#fff}
.botao.whats:hover{filter:brightness(1.07)}
.botao.whats:hover svg{transform:none}
.botao.pequeno{font-size:14px;min-height:38px;padding:0 16px}
.botao:focus-visible,.topo a:focus-visible,.topo-som:focus-visible{outline:3px solid var(--ciano-claro);outline-offset:3px}

/* ---------- topo: a mesma barra escura do app ---------- */
.topo{background:var(--barra-do-app);left:0;position:fixed;right:0;top:0;transition:box-shadow .25s ease;z-index:30}
.topo.rolou{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.topo-barra{align-items:center;display:flex;gap:18px;height:60px;margin:0 auto;max-width:var(--limite);padding:0 24px}
.marca{align-items:center;color:#fff;display:inline-flex;font-size:19px;font-weight:800;gap:9px;letter-spacing:-.02em;text-decoration:none}
.marca img{height:24px;width:24px}
.topo-links{display:flex;gap:2px;margin-left:18px}
.topo-links a{border-radius:10px;color:rgba(255,255,255,.76);font-size:14.5px;font-weight:650;padding:8px 12px;text-decoration:none;transition:color .15s ease,background .15s ease}
.topo-links a:hover{background:rgba(255,255,255,.07);color:#fff}
.topo-acoes{align-items:center;display:flex;gap:6px;margin-left:auto}
.topo-entrar{color:#fff;font-size:14.5px;font-weight:700;padding:8px 12px;text-decoration:none}
.topo-entrar:hover{color:#72deea}
.topo-som{align-items:center;background:rgba(255,255,255,.07);border:0;border-radius:50%;color:rgba(255,255,255,.8);cursor:pointer;display:inline-flex;height:36px;justify-content:center;transition:background .15s ease,transform .3s var(--mola);width:36px}
.topo-som:hover{background:rgba(255,255,255,.14);color:#fff}
.topo-som:active{transform:scale(.9)}
.topo-som svg{height:18px;width:18px}
.topo-som[aria-pressed="true"] .sem-som,.topo-som[aria-pressed="false"] .com-som{display:none}

/* ---------- abertura ---------- */
.heroi{background:radial-gradient(70% 420px at 50% 0%,#dff4f8,transparent 72%),var(--fundo);overflow:hidden;padding:116px 0 30px;position:relative}
.heroi-texto{text-align:center}
.heroi h1{font-size:clamp(36px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0 auto 30px;max-width:26ch;text-wrap:balance}
.heroi h1 span{color:var(--ciano-forte);display:block}
.heroi-sub{color:var(--media);font-size:clamp(16.5px,1.5vw,19px);margin:0 auto 24px;max-width:56ch}
.heroi-acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.heroi-letra{color:var(--fraca);font-size:13.5px;margin:14px 0 0}

/* ---------- o palco: os quatro chegam voando e ficam pairando ----------
   Tres camadas por cartao porque cada uma mexe no proprio transform: o link
   chega voando (uma vez), o miolo paira (sem fim, cada um no seu tempo) e o
   cartao inclina para o ponteiro e sobe no hover. A sombra no chao encolhe
   quando o cartao sobe -- mesma duracao e atraso do pairar. */
.palco{display:grid;gap:22px;grid-template-columns:repeat(4,minmax(0,1fr));margin:54px auto 0;max-width:1180px;padding:0 24px 40px}
.sis{animation:voa .9s var(--curva) calc(.12s + var(--i) * .12s) both;color:var(--tinta);display:block;height:100%;position:relative;text-decoration:none}
.sis::after{animation:sombra 6.4s ease-in-out calc(var(--i) * -1.6s) infinite;background:radial-gradient(closest-side,rgba(17,25,29,.22),transparent);border-radius:50%;bottom:-28px;content:"";height:20px;left:14%;position:absolute;right:14%;z-index:-1}
.sis-paira{animation:paira 6.4s ease-in-out calc(var(--i) * -1.6s) infinite;display:block;height:100%}
.sis-cartao{background:#fff;border:1px solid var(--linha);border-radius:22px;box-shadow:0 1px 2px rgba(17,25,29,.05),0 22px 44px -28px rgba(17,25,29,.4);display:grid;gap:10px;grid-template-rows:auto 1fr auto;height:100%;justify-items:center;padding:28px 18px 22px;text-align:center;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ergue,0px));transition:transform .5s var(--mola),box-shadow .3s ease,border-color .2s ease}
.sis:hover .sis-cartao,.sis:focus-visible .sis-cartao{--ergue:-8px;border-color:color-mix(in srgb,var(--app-a) 45%,var(--linha));box-shadow:0 1px 2px rgba(17,25,29,.05),0 34px 60px -30px color-mix(in srgb,var(--app-b) 70%,transparent)}
.sis.apertou .sis-paira{animation:aperta .45s var(--mola)}
@keyframes aperta{30%{transform:scale(.95)}100%{transform:none}}
.sis:focus-visible{outline:none}
.sis:focus-visible .sis-cartao{outline:3px solid var(--ciano-claro);outline-offset:3px}
.sis-nome{display:grid;gap:16px;justify-items:center}
.sis-nome .selo{box-shadow:0 14px 26px -12px color-mix(in srgb,var(--app-b) 85%,transparent),0 0 0 8px color-mix(in srgb,var(--app-a) 11%,transparent),inset 0 1px 0 rgba(255,255,255,.34);height:76px;transition:box-shadow .35s ease;width:76px}
.sis-nome .selo svg{height:48%;width:48%}
.sis:hover .sis-nome .selo{animation:pula-o-selo .8s var(--curva);box-shadow:0 18px 30px -12px color-mix(in srgb,var(--app-b) 90%,transparent),0 0 0 12px color-mix(in srgb,var(--app-a) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.34)}
.sis-nome b{font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.sis-nome i{color:var(--cor);font-style:normal}
.sis-diz{align-self:start;color:var(--media);font-size:14.5px;line-height:1.45;max-width:24ch}
.sis-ir{align-items:center;color:var(--cor);display:inline-flex;font-size:14px;font-weight:800;gap:5px}
.sis-ir svg{height:15px;transition:transform .3s var(--mola);width:15px}
.sis:hover .sis-ir svg{transform:translateX(4px)}
@keyframes voa{from{opacity:.001;transform:translateY(70px) scale(.9) rotate(-2.5deg)}to{opacity:1;transform:none}}
@keyframes paira{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sombra{0%,100%{opacity:1;transform:scaleX(1)}50%{opacity:.55;transform:scaleX(.84)}}

/* a tela de verdade de cada sistema, num quadro de navegador. Sao fotos do
   app rodando em modo local, com a loja de exemplo (dados inventados em
   src/services/dadosDeExemplo.js) -- nada de tela desenhada a mao. */
.tela-real{background:#fff;border:1px solid var(--linha-forte);border-radius:16px;box-shadow:var(--janela);margin:0;position:relative;transition:transform .5s var(--mola)}
.tela-real:hover{transform:translateY(-4px)}
.tela-real-barra{align-items:center;background:#f2f5f7;border-bottom:1px solid var(--linha);border-radius:16px 16px 0 0;display:grid;gap:12px;grid-template-columns:1fr auto 1fr;height:36px;padding:0 14px}
.janela-pontos{display:flex;gap:6px}
.janela-pontos i{border-radius:50%;height:10px;width:10px}
.janela-pontos i:nth-child(1){background:#ff6058} .janela-pontos i:nth-child(2){background:#ffbd2e} .janela-pontos i:nth-child(3){background:#28c941}
.janela-endereco{align-items:center;background:#fff;border:1px solid var(--linha);border-radius:8px;color:var(--media);display:inline-flex;font-size:12px;gap:6px;justify-content:center;min-width:220px;padding:3px 14px}
.janela-endereco svg{height:12px;width:12px}
.janela-endereco b{font-weight:650}
.tela-real > img{border-radius:0 0 16px 16px;display:block;height:auto;width:100%}
.tela-real .tela-real-celular{border:7px solid #0b0f12;border-radius:28px;bottom:-34px;box-shadow:0 30px 50px -24px rgba(17,25,29,.6);height:auto;position:absolute;right:-20px;width:25%}

/* faiscas do clique */
.faisca{border-radius:50%;height:7px;left:0;pointer-events:none;position:fixed;top:0;width:7px;z-index:60}

/* ---------- numeros reais ---------- */
.numeros{background:#fff;border-bottom:1px solid var(--linha);border-top:1px solid var(--linha);margin-top:56px}
.numeros-grade{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:30px;padding-top:30px}
.numeros-grade div{display:grid;gap:2px}
.numeros-grade b{color:var(--tinta);font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.03em}
.numeros-grade span{color:var(--fraca);font-size:14px;font-weight:650}

/* ---------- uma secao por sistema, cada uma com a cor do seu icone ---------- */
.sistema{background:#fff;padding:100px 0}
#erp,#tvindoor{background:var(--fundo)}
.sistema h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:16px 0 14px;max-width:22ch;text-wrap:balance}
.sistema p{color:var(--media);font-size:17px;margin:0 0 24px;max-width:58ch}
.sistema-cabeca{margin-bottom:8px}
.sistema-logo{align-items:center;display:inline-flex;gap:10px}
.sistema-logo b{font-size:23px;font-weight:800;letter-spacing:-.025em}
.sistema-logo i{color:var(--cor-forte);font-style:normal}
.selo{align-items:center;background:linear-gradient(145deg,var(--app-a),var(--app-b));border:1px solid rgba(255,255,255,.3);border-radius:50%;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--app-b) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.34);color:#fff;display:inline-flex;flex:0 0 auto;height:42px;justify-content:center;overflow:hidden;position:relative;width:42px}
.selo::before{background:radial-gradient(70% 55% at 30% 18%,rgba(255,255,255,.3),transparent 70%);content:"";inset:0;position:absolute}
.selo svg{height:52%;position:relative;stroke-width:1.8;width:52%}
.sistema:target .selo{animation:pula-o-selo .8s var(--curva)}
@keyframes pula-o-selo{0%{transform:translateY(0)}22%{transform:translateY(-14px)}44%{transform:translateY(0)}64%{transform:translateY(-6px)}82%,100%{transform:translateY(0)}}
.lista-check{display:grid;gap:10px;list-style:none;margin:0 0 26px;padding:0}
.lista-check li{align-items:flex-start;display:flex;font-weight:650;gap:10px}
.lista-check svg{background:var(--cor-veu,var(--ciano-veu));border-radius:50%;color:var(--cor-forte,var(--ciano-forte));flex:0 0 auto;height:24px;padding:4px;stroke-width:3;width:24px}
.sistema-grade{align-items:center;display:grid;gap:56px;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.sistema-cabeca + .tela-real{margin-top:30px}
/* quem chega pelo cartao do alto ve' a tela acender */
.sistema:target .tela-real{animation:janela-chama 1.6s var(--curva) .35s}
@keyframes janela-chama{0%,100%{box-shadow:var(--janela)}35%{box-shadow:var(--janela),0 0 0 6px color-mix(in srgb,var(--app-a) 35%,transparent)}}
#credmobix{padding-bottom:130px}
.sistema-lado.invertido .sistema-texto{order:2}
.sistema-lado.invertido .sistema-grade{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.sistema-link{align-items:center;color:var(--cor-forte);display:inline-flex;font-size:16px;font-weight:800;gap:7px;text-decoration:none}
.sistema-link svg{height:18px;transition:transform .3s var(--mola);width:18px}
.sistema-link:hover svg{transform:translateX(5px)}

/* o ERP embaixo da tela: as tres frentes, em texto */
.frentes{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px}
.frentes article{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:24px 24px 26px;transition:transform .35s var(--mola),box-shadow .25s ease}
.frentes article:hover{box-shadow:var(--alto);transform:translateY(-4px)}
.frentes h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.sistema .frentes p{font-size:15.5px;margin:0 0 18px}
.frentes .lista-check{gap:9px;margin:0}
.frentes .lista-check li{font-size:15px}

/* ---------- recursos do ERP ---------- */
.recursos{background:#fff;border-bottom:1px solid var(--linha);border-top:1px solid var(--linha);padding:96px 0}
.recursos .titulo-secao{margin-bottom:36px}
.recursos-grade{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.recursos-grade article{background:var(--cartao-2);border:1px solid var(--linha);border-radius:var(--raio-p);padding:20px 18px;transition:border-color .2s ease,transform .35s var(--mola),box-shadow .25s ease}
.recursos-grade article:hover{border-color:rgba(0,169,210,.4);box-shadow:var(--alto);transform:translateY(-4px)}
.recursos-grade svg{background:var(--ciano-veu);border-radius:12px;color:var(--ciano-forte);height:42px;padding:9px;transition:transform .45s var(--mola);width:42px}
.recursos-grade article:hover svg{transform:rotate(-8deg) scale(1.12)}
.recursos-grade h3{font-size:16.5px;font-weight:800;margin:14px 0 4px}
.recursos-grade p{color:var(--media);font-size:14px;line-height:1.5;margin:0}
.recursos-acao{margin-top:34px;text-align:center}

/* ---------- vantagens ---------- */
.vantagens{background:var(--fundo);padding:92px 0}
.vantagens-grade{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px}
.vantagens-grade article{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:24px 22px;transition:transform .35s var(--mola),box-shadow .25s ease}
.vantagens-grade article:hover{box-shadow:var(--alto);transform:translateY(-4px)}
.icone{align-items:center;background:var(--ciano-veu);border-radius:14px;color:var(--ciano-forte);display:inline-flex;height:46px;justify-content:center;transition:transform .45s var(--mola);width:46px}
.icone svg{height:23px;width:23px}
.vantagens-grade article:hover .icone,.negocios-grade article:hover .icone{transform:rotate(-8deg) scale(1.1)}
.vantagens-grade h3{font-size:18.5px;font-weight:800;letter-spacing:-.01em;margin:16px 0 6px}
.vantagens-grade p{color:var(--media);font-size:15px;margin:0}

/* ---------- para quem e' ---------- */
.negocios{background:#fff;border-top:1px solid var(--linha);padding:92px 0}
.negocios-grade{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.negocios-grade article{align-items:flex-start;background:var(--cartao-2);border:1px solid var(--linha);border-radius:var(--raio-p);display:flex;gap:14px;padding:18px;transition:transform .35s var(--mola),border-color .2s ease}
.negocios-grade article:hover{border-color:rgba(0,169,210,.4);transform:translateY(-3px)}
.negocios-grade .icone{flex:0 0 auto;height:42px;width:42px}
.negocios-grade .icone svg{height:21px;width:21px}
.negocios-grade h3{font-size:16.5px;font-weight:800;margin:2px 0 3px}
.negocios-grade p{color:var(--media);font-size:14px;line-height:1.5;margin:0}
.negocios-outro{color:var(--media);font-size:15.5px;margin:26px 0 0}
.negocios-outro a{color:var(--ciano-forte);font-weight:800}

/* ---------- chamada final ---------- */
.chamada{background:#fff;padding:0 0 92px}
.chamada-caixa{background:var(--barra-do-app);border-radius:28px;color:#fff;padding:64px 48px;text-align:center}
.chamada-caixa h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 auto 12px;max-width:22ch;text-wrap:balance}
.chamada-caixa p{color:rgba(255,255,255,.72);font-size:17px;margin:0 0 28px}
.chamada-caixa .botao.vazado{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.chamada-caixa .botao.vazado:hover{border-color:#fff}

/* ---------- rodape ---------- */
.rodape{background:var(--barra-do-app);color:rgba(255,255,255,.72);padding:64px 0 26px}
.rodape-grade{display:grid;gap:32px;grid-template-columns:1.4fr repeat(3,minmax(0,1fr))}
.rodape-marca p{font-size:14.5px;margin:14px 0 0;max-width:34ch}
.rodape h3{color:#fff;font-size:14px;font-weight:800;letter-spacing:.04em;margin:4px 0 12px;text-transform:uppercase}
.rodape-grade > div:not(.rodape-marca){align-content:start;display:grid;gap:9px}
.rodape-grade a:not(.marca){font-size:14.5px;text-decoration:none}
.rodape-grade a:not(.marca):hover{color:#72deea}
.rodape-fim{border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;font-size:13px;gap:10px;justify-content:space-between;margin-top:44px;padding-top:22px}

/* ---------- telas menores ---------- */
/* ---------- quem e' a D'Mobix (19/10/2026) ----------
   A raiz virou portaria: os quatro cartoes em cima e a casa aqui. O que conta
   a arquitetura e' o ALINHAMENTO -- os quatro nomes terminam em "D'Mobix" e
   caem na mesma coluna --, e nao uma fila de caixinhas iguais. O desenho vem
   da `.arvore` da /apresentacao (casa.css), trazido para a cor clara: la' ele
   mora no escuro, aqui o painel escuro e' que faz o contraste na pagina. */
.empresa{background:#fff;border-top:1px solid var(--linha);padding:92px 0}
.empresa-corpo{align-items:start;display:grid;gap:40px;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);margin-top:8px}
.empresa-conta p{color:var(--media);font-size:16.5px;line-height:1.62;margin:0 0 16px;max-width:52ch}
.empresa-forte{color:var(--tinta)!important;font-size:clamp(21px,2.3vw,27px)!important;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:18px!important}
.empresa-assina{border-top:1px solid var(--linha);color:var(--fraca)!important;font-size:13.5px!important;font-weight:700;line-height:1.6;margin-top:26px!important;padding-top:18px}
.arvore{background:var(--barra-do-app);border-radius:var(--raio);box-shadow:0 36px 70px -34px rgba(13,27,33,.6);color:#fff;padding:28px 30px}
.arvore-topo{align-items:center;border-bottom:1px solid rgba(255,255,255,.14);display:flex;gap:12px;margin-bottom:20px;padding-bottom:18px}
.arvore-topo img{height:32px;width:32px}
.arvore-topo b{color:#fff;font:800 18px/1 var(--corpo);letter-spacing:-.05em}
.arvore-topo span{color:rgba(255,255,255,.5);font:700 9.5px/1.3 var(--mono);letter-spacing:.12em;margin-left:auto;text-transform:uppercase}
.arvore ol{display:grid;gap:3px;list-style:none;margin:0;padding:0}
/* A COLUNA DO NOME E' FIXA, E NAO `1fr`.
   Com `1fr auto` quem mandava na largura era a LEGENDA de cada linha, que tem
   tamanho diferente em cada uma: os quatro nomes terminavam em quatro x
   diferentes e o alinhamento -- que e' a unica coisa que esta secao tem para
   dizer -- simplesmente nao acontecia. Medido: 1014, 1129, 1088 e 1162px.
   Fixa, os quatro caem na mesma coluna. 200px cabe o maior ("TV Indoor
   D'Mobix", 192,3px em 24/800). */
.arvore li a{align-items:baseline;border-radius:var(--raio-p);display:grid;gap:0 14px;grid-template-columns:var(--col-nome,200px) minmax(0,1fr);padding:10px 12px;text-decoration:none;transition:background .2s}
.arvore li a:hover{background:rgba(255,255,255,.08)}
/* A coluna da esquerda e' alinhada a' DIREITA: e' o que faz os quatro
   "D'Mobix" cairem exatamente uns sobre os outros. Uma cor so' e um peso so'
   (regra dele, 08/10/2026: *"a parte do cred na mesma letra que ficou
   Mobix"*) -- prefixo pintado leria como duas marcas. */
.arvore-nome{color:#fff;font:800 24px/1.15 var(--corpo);letter-spacing:-.05em;text-align:right;white-space:nowrap}
.arvore-nome i{color:inherit;font-style:normal}
.arvore-diz{color:rgba(255,255,255,.6);font:600 13px/1.25 var(--corpo);letter-spacing:-.01em}
.arvore-pe{border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.46);font-size:12.5px;line-height:1.5;margin:20px 0 0;padding-top:18px}

@media (max-width:1060px){
  .recursos-grade{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vantagens-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topo-links{display:none}
  .palco{gap:30px 18px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
}
@media (max-width:880px){
  .heroi{padding-top:96px}
  .sistema-grade{gap:36px;grid-template-columns:1fr}
  .sistema-lado.invertido .sistema-texto{order:0}
  .sistema-lado.invertido .sistema-grade{grid-template-columns:1fr}
  .numeros-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frentes{grid-template-columns:1fr;margin-top:36px}
  .negocios-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .empresa-corpo{gap:34px;grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .limite,.topo-barra{padding-left:16px;padding-right:16px}
  /* o rotulo quebrava em duas linhas ao lado da marca; a lista abaixo ja' diz o mesmo */
  .arvore{padding:22px 18px}
  .arvore-topo span{display:none}
  .arvore{--col-nome:168px}
  .arvore-nome{font-size:20px}
  .arvore-diz{white-space:normal}
  .arvore li a{gap:2px 12px;grid-template-columns:1fr}
  .arvore-nome{text-align:left}
  .topo-barra{gap:8px}
  .marca{font-size:17px}
  .topo-entrar{padding:8px 6px}
  .topo .botao.pequeno{font-size:13.5px;padding:0 13px}
  .heroi h1{font-size:34px}
  .heroi-acoes .botao{width:100%}
  .palco{gap:24px 12px;margin-top:36px;padding:0 16px 34px}
  .sis-cartao{border-radius:18px;gap:8px;padding:20px 10px 16px}
  .sis-nome{gap:12px}
  .sis-nome .selo{height:58px;width:58px}
  .sis-nome b{font-size:15.5px}
  .sis-diz{font-size:12.5px}
  .sis-ir{font-size:12.5px}
  .sistema,.vantagens,.recursos,.negocios{padding:64px 0}
  .sistema-logo b{font-size:20px}
  .tela-real-barra{height:30px}
  .janela-endereco{font-size:11px;min-width:0;padding:2px 10px}
  .tela-real .tela-real-celular{border-width:5px;border-radius:18px;bottom:-24px;right:-8px;width:28%}
  #credmobix{padding-bottom:96px}
  .vantagens-grade,.recursos-grade,.negocios-grade{grid-template-columns:1fr}
  .chamada-caixa{border-radius:20px;padding:44px 20px}
  .rodape-grade{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}