/* ⚠ A MESMA FONTE DO APLICATIVO — de proposito.
   O site usava Inter, que carrega bem mas e a fonte de mil produtos de
   software (e de quase toda pagina de IA). O OrcaPRO que o cliente instala
   usa IBM Plex Sans; alinhar as duas faz site e produto parecerem a mesma
   coisa, e o desenho da Plex le como ferramenta de engenharia.
   As tres declaracoes apontam para o MESMO arquivo — e como o produto faz
   (css/fontes.css), conferido por md5. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-sans.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plex-sans.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plex-sans.woff2') format('woff2')}


  /* ⚠ TOKEN DE FUNDO E TOKEN DE TEXTO SAO COISAS DIFERENTES.
   Enquanto o fundo da pagina foi sempre claro, um valor so servia aos dois
   papeis. No tema escuro nao serve: navy como texto sobre fundo navy some.
   Sufixo -tx = a cor quando ela e TEXTO; sem sufixo = quando e FUNDO (e o
   texto em cima dela e branco).
   Os onze pares foram medidos nos dois temas; nenhum abaixo de 4,5:1. */
:root{
  --navy:#0f2740; --navy2:#16304d;
  --aco:#2e6f9e; --aco2:#4a8fc0;
  /* ⚠ era #15803d: branco em cima dava 3,30:1 e este e o botao de compra do
     site. #15873f (4,60:1) ja era o :hover deste mesmo botao. */
  --verde:#15873f;
  --ambar:#f59e0b; --vermelho:#dc2626;
  --bg:#f4f7fb; --card:#ffffff; --tx:#1e293b;
  /* ⚠ era #64748b, 4,43:1 — reprovava por um fio */
  --muted:#5b6b7f;
  --linha:#dbe4ee; --amarelo-input:#fff7cc;
  /* as mesmas cores quando usadas como TEXTO sobre fundo claro */
  --navy-tx:#0f2740; --aco-tx:#2e6f9e; --verde-tx:#15803d;
  /* ⚠ SUPERFICIES TINGIDAS — vieram da home em 06/09/2026, quando ela passou a
     linkar esta folha em vez de carregar uma copia propria. Sao os fundos das
     abas/faixas do simulador (--card2), das caixas de sucesso (--verde-suave,
     --verde-borda) e dos chips MO/MAT/EQ (--aco-suave, --ambar-suave); e o
     ambar quando e TEXTO (--ambar-tx). Sem eles, var() invalida descarta a
     declaracao e a aba/faixa fica sem fundo nem borda, sem nada acusar. */
  --card2:#eef3f9; --verde-suave:#e8f6ee; --verde-borda:#b7e4c7;
  --aco-suave:#e8f0fb; --ambar-suave:#fef7e8; --ambar-tx:#b45309;
  --vermelho-tx:#b91c1c;   /* vermelho quando e TEXTO: 6,02:1 sobre --bg (o --vermelho de botao dava 4,0) */
}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--tx);background:var(--bg);line-height:1.55}
  a{color:var(--aco-tx);text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
  .btn{display:inline-block;padding:13px 26px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;border:0;transition:transform .12s,box-shadow .12s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,39,64,.25)}
  .btn-verde{background:var(--verde);color:#fff}
  .btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
  .btn-navy{background:var(--navy);color:#fff}
  .pill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.4px}
  h2.sec{font-size:clamp(24px,4vw,34px);color:var(--navy-tx);text-align:center;margin-bottom:8px}
  p.sub{color:var(--muted);text-align:center;max-width:640px;margin:0 auto 36px;font-size:16px}
  section{padding:64px 0}

  /* ===== HERO ===== */
  header.hero{background:linear-gradient(150deg,var(--navy) 0%,var(--navy2) 55%,#1d3a5f 100%);color:#fff;padding:26px 0 70px;position:relative;overflow:hidden}
  header.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(74,143,192,.25),transparent 65%)}
  .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:52px}
  .logo{font-size:22px;font-weight:800;letter-spacing:.5px}
  .logo b{color:var(--aco-tx)}
  .topbar nav a{color:#cdd9e6;margin-left:22px;font-size:14px;font-weight:600}
  .topbar nav a:hover{color:#fff}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
  .hero h1{font-size:clamp(30px,4.6vw,46px);line-height:1.15;font-weight:800;margin-bottom:18px}
  .hero h1 em{font-style:normal;color:#7dc4f5}
  .hero p.lead{font-size:17px;color:#c9d6e4;margin-bottom:26px;max-width:520px}
  .hero .selos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
  .hero .selos .pill{background:rgba(255,255,255,.12);color:#dbe8f5;border:1px solid rgba(255,255,255,.18)}
  .hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
  .mock{background:var(--card);border-radius:14px;box-shadow:0 24px 60px rgba(3,12,24,.45);overflow:hidden;color:var(--tx);font-size:12px;transform:rotate(1.2deg)}
  .mock .mbar{background:#e8edf3;padding:8px 12px;display:flex;gap:6px;align-items:center}
  .mock .dot{width:10px;height:10px;border-radius:50%}
  .mock table{width:100%;border-collapse:collapse}
  .mock th{background:var(--navy);color:#fff;padding:6px 8px;font-size:10.5px;text-align:left}
  .mock td{padding:5px 8px;border-bottom:1px solid var(--linha)}
  .mock tr:nth-child(even) td{background:#eff3f8}
  .mock .tot td{background:var(--navy)!important;color:#fff;font-weight:700}

  /* ===== NÚMEROS ===== */
  .numeros{background:#fff;border-bottom:1px solid var(--linha)}
  .numeros .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:34px 0;text-align:center}
  .numeros b{display:block;font-size:30px;color:var(--navy-tx)}
  .numeros span{color:var(--muted);font-size:13.5px}

  /* ===== SIMULADOR =====
     ⚠ Regras em TOKEN, nao em hexadecimal. Ate 06/09/2026 esta folha guardava
     uma copia com #fff/#e8edf3/#fafcfe cravados enquanto a home (que carregava
     CSS proprio) ja usava var(--card)/var(--card2)/var(--bg) desde 13/08. No
     tema escuro a copia daqui dava .fbar code em #ecf2f8 sobre #eef3f9 (~1:1).
     A home passou a linkar esta folha; o que vale e a versao tokenizada. O
     .bdi-val usa var(--navy-tx) porque --amarelo-input escurece no tema escuro
     (#3a3418): cor fixa #12212f ali dava 1,31:1. */
  .sim{background:var(--card);border:1px solid var(--linha);border-radius:16px;box-shadow:0 18px 50px rgba(15,39,64,.12);overflow:hidden}
  .sim-top{background:var(--navy);color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
  .sim-top .titulo{font-weight:700;font-size:14px}
  .sim-top .bdi-box{display:flex;align-items:center;gap:10px;font-size:13px;background:rgba(255,255,255,.1);padding:6px 14px;border-radius:10px}
  .sim-top input[type=range]{width:140px;accent-color:var(--ambar)}
  .sim-top .bdi-val{background:var(--amarelo-input);color:var(--navy-tx);font-weight:800;padding:2px 10px;border-radius:6px;min-width:64px;text-align:center}
  .abas{display:flex;background:var(--card2);border-bottom:1px solid var(--linha);overflow-x:auto}
  .abas button{flex:0 0 auto;padding:10px 18px;border:0;background:transparent;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent}
  .abas button.on{color:var(--navy-tx);background:var(--card);border-bottom-color:var(--verde-tx)}
  .fbar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--card);border-bottom:1px solid var(--linha);font-size:12.5px}
  .fbar .fx{font-style:italic;font-weight:800;color:var(--aco-tx);font-family:Georgia,serif}
  .fbar code{background:var(--card2);padding:3px 10px;border-radius:6px;color:var(--navy-tx);font-size:12px;flex:1;white-space:nowrap;overflow-x:auto}
  .painel{min-height:360px}
  .grade{width:100%;border-collapse:collapse;font-size:12.5px}
  .grade th{background:var(--navy);color:#fff;padding:7px 9px;text-align:left;font-size:12px;position:sticky;top:0}
  .grade td{padding:6px 9px;border-bottom:1px solid var(--linha);cursor:default}
  .grade tr:nth-child(even) td{background:var(--bg)}
  .grade tr.etapa td{background:var(--aco);color:#fff;font-weight:700}
  .grade tr.sub td{background:var(--card2);font-weight:700}
  .grade tr.tot td{background:var(--navy);color:#fff;font-weight:800}
  .grade td.num{text-align:right;font-variant-numeric:tabular-nums}
  .grade tr.clicavel:hover td{outline:2px solid var(--aco2);outline-offset:-2px}
  .aba-scroll{overflow:x auto;overflow-x:auto;max-height:430px;overflow-y:auto}
  .resumo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:22px}
  .rcard{border:1px solid var(--linha);border-radius:12px;padding:18px;text-align:center}
  .rcard b{display:block;font-size:22px;color:var(--navy-tx);font-variant-numeric:tabular-nums}
  .rcard.destq{background:var(--navy);border-color:var(--navy-tx)}
  .rcard.destq b,.rcard.destq span{color:#fff}
  .rcard span{font-size:12.5px;color:var(--muted)}
  .pizza-linha{display:flex;gap:26px;align-items:center;padding:6px 26px 26px}
  .pizza{width:150px;height:150px;border-radius:50%;flex:0 0 auto;border:1px solid var(--linha)}
  .leg{font-size:13px}
  .leg div{margin:6px 0}
  .leg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}
  .abc-bar{height:16px;border-radius:4px;background:var(--aco);display:inline-block;vertical-align:middle}
  .crono-svg{width:100%;height:auto;display:block}
  .sim-foot{padding:14px 18px;background:var(--card);border-top:1px solid var(--linha);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}
  .dica-live{background:var(--verde-suave);border:1px solid var(--verde-borda);color:var(--verde-tx);padding:10px 16px;border-radius:10px;font-size:13.5px;max-width:760px;margin:18px auto 26px;text-align:center}

  /* ===== PASSOS ===== */
  .passos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .passo{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:26px;position:relative}
  .passo .n{position:absolute;top:-16px;left:22px;width:34px;height:34px;border-radius:50%;background:var(--verde);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
  .passo h3{color:var(--navy-tx);margin:8px 0 8px;font-size:17px}
  .passo p{font-size:14px;color:var(--muted)}

  /* ===== FEATURES ===== */
  .feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  details.feat{background:var(--card);border:1px solid var(--linha);border-radius:12px;overflow:hidden}
  details.feat summary{list-style:none;display:flex;align-items:center;gap:14px;padding:17px 20px;cursor:pointer;font-weight:700;color:var(--navy-tx);font-size:15px}
  details.feat summary::-webkit-details-marker{display:none}
  details.feat summary .ico{font-size:22px;flex:0 0 auto}
  details.feat summary .mais{margin-left:auto;color:var(--aco-tx);font-size:12px;font-weight:600;white-space:nowrap}
  details.feat[open] summary .mais .quando-fechado{display:none}
  details.feat:not([open]) summary .mais .quando-aberto{display:none}
  details.feat .corpo{padding:0 20px 18px 56px;font-size:14px;color:var(--muted)}
  details.feat .corpo ul{margin:8px 0 0 18px}
  details.feat .corpo li{margin:4px 0}

  /* ===== HISTÓRIA ===== */
  #historia{background:var(--navy);color:#fff}
  #historia h2.sec{color:#fff}
  #historia p.sub{color:#b9c9da}
  .hist-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
  .hist-foto{background:linear-gradient(160deg,var(--aco) 0%,var(--navy2) 100%);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:34px;text-align:center}
  .hist-foto .sigla{width:110px;height:110px;margin:0 auto 18px;border-radius:50%;background:#fff;color:var(--navy-tx);font-weight:800;font-size:40px;display:flex;align-items:center;justify-content:center;letter-spacing:1px}
  .hist-foto b{display:block;font-size:18px}
  .hist-foto span{color:#c9d6e4;font-size:13px;display:block;margin-top:4px}
  .hist-txt p{color:#d5e0eb;font-size:15.5px;margin-bottom:14px}
  .hist-txt p b{color:#fff}
  .marcos{margin-top:20px;border-left:2px solid var(--aco2);padding-left:18px}
  .marcos div{margin-bottom:10px;font-size:14px;color:#c9d6e4}
  .marcos b{color:#7dc4f5;margin-right:8px}

  /* ===== 24/7 ===== */
  .dev247{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
  .dev-card{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:26px}
  .dev-card h3{color:var(--navy-tx);margin-bottom:10px;font-size:18px}
  .dev-card p{font-size:14.5px;color:var(--muted)}
  .puls{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--verde);margin-right:8px;animation:pulsa 1.6s infinite}
  @keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
  .changelog{max-height:280px;overflow-y:auto;font-size:13.5px}
  .changelog div{padding:8px 0;border-bottom:1px dashed var(--linha);color:var(--tx)}
  .changelog b{color:var(--verde-tx);font-size:11.5px;margin-right:8px}

  /* ===== COMPARATIVO ===== */
  table.comp{width:100%;border-collapse:collapse;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 6px 24px rgba(15,39,64,.08);font-size:14px}
  table.comp th{background:var(--navy);color:#fff;padding:13px;text-align:center}
  table.comp th:first-child{text-align:left}
  table.comp td{padding:11px 13px;border-bottom:1px solid var(--linha);text-align:center}
  table.comp td:first-child{text-align:left;font-weight:600}
  table.comp tr:last-child td{border-bottom:0}
  .sim-ok{color:var(--verde-tx);font-weight:800}
  /* ⚠ era #cbd5e1: 1,66:1 sobre o cartao branco — o "nao" da tabela comparativa
     ficava ilegivel, e e justamente a coluna que sustenta o argumento. */
  .nao{color:var(--muted);font-weight:700}
  /* ⚠ --ambar e FUNDO de botao; como texto dava 2,15:1. O par de texto e --ambar-tx. */
  .meio{color:var(--ambar-tx);font-weight:700;font-size:12.5px}
  /* ⚠ hexadecimal claro cravado: no tema escuro pintava a coluna de branco-esverdeado
     sob texto claro. O token vira com o tema. */
  .col-orca{background:var(--verde-suave)}

  /* ===== PLANOS ===== */
  .planos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin:0 auto}
  .plano{background:var(--card);border:2px solid var(--linha);border-radius:16px;padding:30px;text-align:center;position:relative}
  .plano.pro{border-color:var(--verde-tx);box-shadow:0 18px 44px rgba(21,128,61,.16)}
  .plano.plus{border-color:var(--navy-tx);box-shadow:0 18px 44px rgba(15,39,64,.14)}
  .plano .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--verde);color:#fff;padding:4px 18px;border-radius:99px;font-size:12px;font-weight:800;letter-spacing:.6px}
  .plano h3{color:var(--navy-tx);font-size:20px;margin-bottom:6px}
  .preco{font-size:38px;font-weight:800;color:var(--navy-tx);margin:10px 0 2px}
  .preco small{font-size:14px;color:var(--muted);font-weight:600}
  .plano ul{list-style:none;text-align:left;margin:18px 0 22px;font-size:14px}
  .plano li{padding:6px 0;border-bottom:1px dashed var(--linha)}
  .plano li::before{content:"✓ ";color:var(--verde-tx);font-weight:800}
  .plano li.x::before{content:"— ";color:#cbd5e1}
  .plano li.x{color:#94a3b8}

  /* ===== FAQ ===== */
  .faq{max-width:760px;margin:0 auto}
  details.q{background:var(--card);border:1px solid var(--linha);border-radius:10px;margin-bottom:10px}
  details.q summary{padding:15px 20px;font-weight:700;color:var(--navy-tx);cursor:pointer;font-size:15px;list-style:none}
  details.q summary::-webkit-details-marker{display:none}
  details.q p{padding:0 20px 16px;font-size:14px;color:var(--muted)}

  /* ===== CTA FINAL / FOOTER ===== */
  #ctafinal{background:linear-gradient(150deg,var(--navy),#1d3a5f);color:#fff;text-align:center}
  #ctafinal h2{font-size:clamp(24px,4vw,34px);margin-bottom:12px}
  #ctafinal p{color:#c9d6e4;margin-bottom:26px}
  footer{background:#0b1c2e;color:#8fa3b8;font-size:13px;padding:30px 0;text-align:center}
  footer b{color:#c9d6e4}
  footer .lin{margin-top:6px}

  @media(max-width:860px){
    .hero-grid,.hist-grid,.dev247{grid-template-columns:1fr}
    .numeros .grid{grid-template-columns:repeat(2,1fr)}
    .passos{grid-template-columns:1fr}
    .feats{grid-template-columns:1fr}
    .planos{grid-template-columns:1fr}
    .resumo-cards{grid-template-columns:1fr}
    .mock{transform:none}
    /* mobile TEM navegação: pílulas com rolagem horizontal (antes: display:none, sem menu nenhum) */
    .topbar{flex-direction:column;gap:10px;margin-bottom:30px}
    .topbar nav{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;padding:2px 2px 6px;scrollbar-width:none}
    .topbar nav::-webkit-scrollbar{display:none}
    .topbar nav a{flex:0 0 auto;margin:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:9px 15px;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
    /* 1ª dobra: CTA verde ANTES dos selos, lead enxuto, 3 selos */
    .hero-grid>div:first-child{display:flex;flex-direction:column}
    .hero .ctas{order:3;margin-bottom:14px}
    .hero .selos{order:4}
    .cta-nota{order:5;margin-top:0}
    .lead-mais{display:none}
    .hero .selos .pill:nth-child(n+4){display:none}
    /* alvos de toque ≥44px */
    .abas button{min-height:44px}
    #telas .tab{min-height:44px}
    .chat-chips button{min-height:44px}
    /* simulador legível: a tabela rola de lado em vez de espremer 9 colunas */
    .grade{min-width:720px}
    .dica-deslize{display:block!important}
    /* aba Resumo (a inicial no celular): pizza e legenda uma embaixo da outra em vez de espremidas */
    .pizza-linha{flex-wrap:wrap;justify-content:center;gap:16px;padding:6px 18px 22px}
    .pizza{width:120px;height:120px}
    .leg{flex:1 1 180px}
  }
  /* 320px: a caixa do BDI transbordava o .sim-top e o valor era cortado pelo overflow:hidden do cartao */
  @media(max-width:360px){
    .sim-top .bdi-box{width:100%;max-width:100%}
    .sim-top input[type=range]{flex:1 1 auto;width:auto;min-width:60px}
  }

/* ⚠ o fundo do corpo mora AQUI, nao num style= inline: inline vence a
   folha e o tema escuro nao conseguia trocar. */
body{background:var(--bg);color:var(--tx)}
/* corpo do site na fonte do produto */
body{font-family:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Arial,sans-serif}

/* =====================================================================
 * MODERNIZAÇÃO 13/08/2026 — tema escuro, transição entre páginas e
 * polimento tipográfico.
 *
 * ⚠ O CRITÉRIO. Metade das "tendências de 2026" que circulam por aí —
 * composição assimétrica, navegação experimental, elementos flutuantes —
 * é exatamente o que faz um site parecer genérico e envelhecer em um ano.
 * Num sistema de orçamento vendido para engenheiro, isso trabalha contra:
 * a pessoa precisa achar "Planos", não admirar a rolagem. Entrou só o que
 * é infraestrutura moderna de verdade e some quando não é suportado.
 *
 * ⚠ E TUDO RESPEITA prefers-reduced-motion. Não é acessibilidade de
 * enfeite: quem marca essa opção costuma marcar por enjoo ou vertigem.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. TEMA ESCURO — a paleta vem do PRODUTO, não foi inventada aqui.
 *
 * O aplicativo tem tema escuro desde a v1.1.189 ("aparência: duas letras e
 * claro/escuro, com contraste medido"), com os valores já testados em
 * css/app.css. O site herda os mesmos, mapeados nos nomes de token que ele
 * já usa. Mesmo argumento da fonte: site e produto sendo a mesma coisa.
 *
 * Dois gatilhos, nesta ordem de precedência:
 *   [data-tema] no <html>  → escolha explícita de quem clicou no botão
 *   prefers-color-scheme   → o sistema operacional, quando não houve escolha
 * O atributo é o mesmo nome que o produto usa, para não haver dois padrões.
 * ------------------------------------------------------------------- */
:root{
  color-scheme: light;
  --sombra-sm:0 1px 2px rgba(15,39,64,.06);
  --sombra:0 1px 3px rgba(15,39,64,.08), 0 8px 24px -12px rgba(15,39,64,.18);
  --sombra-lg:0 24px 60px -28px rgba(15,39,64,.28);
  --foco:#2e6f9e;
}

/* ⚠ HISTORICO: o escuro automatico ficou DESLIGADO ate 13/08/2026 porque as
   5 paginas tinham `background:#fff` cravado no <style> proprio, que token
   nenhum alcanca: dava texto branco sobre cartao branco. Depois que as
   superficies passaram a token ele foi religado no bloco
   @media (prefers-color-scheme: dark) do FIM deste arquivo, que espelha os
   valores de [data-tema="dark"] abaixo. Os dois blocos tem de andar juntos. */
:root[data-tema="dark"]{
  color-scheme: dark;
  --bg:#0b1622; --card:#11202e; --tx:#ecf2f8; --muted:#9db0c2; --linha:#2e455c;
  --navy:#11202e; --navy2:#16293a;
  /* ⚠ estes NAO clareiam: sao FUNDO de botao, com rotulo branco em cima.
     Clareados davam 1,74:1 no 'Quero a obra inteira'. Quem clareia no
     escuro e o par -tx abaixo, que e texto. */
  --amarelo-input:#3a3418;
  --sombra-sm:0 1px 2px rgba(0,0,0,.35);
  --sombra:0 1px 3px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
  --sombra-lg:0 24px 60px -28px rgba(0,0,0,.6);
  /* ⚠ os tokens de TEXTO tambem viram no escuro. Sem estas tres linhas o
     preco saia #0f2740 sobre #0b1622: 1,00:1, invisivel. */
  --navy-tx:#ecf2f8; --aco-tx:#6fb3e0; --verde-tx:#4ade80;
  --foco:#8fc9f0;
  /* superficies tingidas no escuro (medidas na home em 13/08/2026: chips MO/MAT/EQ
     a 6,62:1, 8,86:1 e 9,06:1 sobre o texto claro correspondente) */
  --card2:#16293a; --verde-suave:#12291c; --verde-borda:#1f5233;
  --aco-suave:#12283a; --ambar-suave:#2e2510; --ambar-tx:#fbbf24;
  --vermelho-tx:#f87171;   /* 5,98:1 sobre --card escuro */
  /* ⚠ no escuro --navy == --card (#11202e): o botao navy sumia dentro do cartao (1,00:1).
     Aco por baixo do rotulo branco: 5,41:1; e 3,06:1 contra o cartao, que e o minimo de
     componente. Vale para todas as paginas que linkam esta folha. */
  .btn-navy{background:var(--aco)}
}

/* as superfícies que estavam com branco cravado passam a seguir o token */
:root[data-tema="dark"] body,
:root[data-tema="dark"] .pl-wrap,
:root[data-tema="dark"] .go-wrap{ background:var(--bg); color:var(--tx); }

/* ⚠ o botão de tema não pode "piscar" o tema errado antes do script rodar —
   ele é pintado por CSS a partir do próprio atributo, não por JS. */
.tema-bt{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:34px; height:34px; padding:0; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.22); color:inherit;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
/* ⚠ a barra do topo veste os LINKS de claro (.pl-topo a). O botao e um
   <button> e nao casava com aquela regra: o icone saia com o traco escuro
   do body, sobre a barra escura. Invisivel sem nada acusar. */
.pl-topo .tema-bt,.bm-topo .tema-bt,.go-topo .tema-bt{ color:#eaf2fa; }
.tema-bt:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
.tema-bt svg{ width:17px; height:17px; stroke:currentColor; fill:none;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tema-bt .t-lua{ display:none; }
:root[data-tema="dark"] .tema-bt .t-lua{ display:block; }
:root[data-tema="dark"] .tema-bt .t-sol{ display:none; }

/* ---------------------------------------------------------------------
 * 2. TRANSIÇÃO ENTRE PÁGINAS
 *
 * O site virou multi-página hoje (/orcamento, /gestao-de-obras, /sobre). Sem
 * isto, cada clique no menu é um pisca-branco e a navegação parece um
 * conjunto de documentos soltos. Com isto, parece um produto.
 *
 * São três linhas de CSS, sem JavaScript e sem biblioteca: onde o navegador
 * não suporta, a navegação acontece como sempre aconteceu. É o oposto de
 * "efeito" — é a ausência de um defeito que a divisão em páginas criou.
 * ------------------------------------------------------------------- */
@view-transition{ navigation: auto; }

/* o logo é o mesmo elemento em todas as páginas: ele atravessa em vez de
   sumir e reaparecer */
.pl-topo a[aria-label^="OrçaPRO"] svg,
.bm-topo a[aria-label^="OrçaPRO"] svg{ view-transition-name: marca; }

::view-transition-old(root){ animation: sai .18s ease both; }
::view-transition-new(root){ animation: entra .26s ease both; }
@keyframes sai { to { opacity:0 } }
@keyframes entra { from { opacity:0; transform:translateY(6px) } }

/* ---------------------------------------------------------------------
 * 3. TIPOGRAFIA — o que dá sofisticação sem trocar de fonte
 * ------------------------------------------------------------------- */
h1,h2,h3,.pl-hero h1,.go-tit{
  /* ⚠ evita a "linha órfã": título de 5 palavras que quebra deixando 1
     sozinha embaixo. O navegador reequilibra as linhas sozinho. */
  text-wrap: balance;
  letter-spacing:-.022em;
}
p,li{ text-wrap: pretty; }          /* mesma ideia, aplicada ao fim do parágrafo */

/* escala fluida: o título acompanha a largura em vez de saltar em degraus */
.pl-hero h1{ font-size:clamp(28px, 2.2vw + 20px, 44px); line-height:1.14; }
.go-tit,h2.sec{ font-size:clamp(22px, 1.2vw + 17px, 31px); line-height:1.2; }

/* números tabulares: preço e quantidade param de dançar ao mudar de valor */
.preco,.pl-preco,.numeros b,[data-preco],[data-economia],.kpi,.ki{
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
 * 4. MICROINTERAÇÃO — o mínimo que dá resposta ao toque
 * ------------------------------------------------------------------- */
.btn,.or-bt,.pl-bt,.tema-bt,a.sec{
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease,
              background-color .16s ease, color .16s ease;
}
.btn:active,.or-bt:active,.pl-bt:active{ transform:translateY(1px) scale(.995); }

.card,.pl-card,.or-bl,.go-card,.rcard{
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.card:hover,.pl-card:hover,.or-bl:hover,.go-card:hover{
  transform:translateY(-2px); box-shadow:var(--sombra-lg);
}

/* ⚠ FOCO VISÍVEL, e não é detalhe: quem navega por teclado (e o leitor de
   tela) depende disto para saber onde está. O anel usa a cor de foco do
   tema, que clareia no escuro. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--foco); outline-offset:2px; border-radius:4px;
}

/* ---------------------------------------------------------------------
 * 5. REVELAÇÃO NO ROLAR — em CSS, sem JavaScript
 *
 * Onde o navegador tem animação ligada à rolagem, a seção entra sozinha. É
 * progressivo por construção: sem suporte, o @supports inteiro é ignorado e
 * o conteúdo aparece normalmente — nunca invisível.
 * ------------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pl-card,.or-bl,.go-card,.rcard,.dev-card{
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes revelar{ from{ opacity:0; transform:translateY(14px) } }
  }
}

/* ---------------------------------------------------------------------
 * 6. ⚠ A CHAVE GERAL DO MOVIMENTO
 * Quem desligou animação no sistema não recebe nenhuma — incluindo a
 * transição entre páginas, que é justamente a que mais incomoda quem tem
 * sensibilidade vestibular.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none!important;
  }
}

@media (prefers-color-scheme: dark){
  /* ⚠ religado em 13/08/2026, depois que as superficies das 5 paginas e da
     home passaram a usar token. Ligado antes disso dava texto claro sobre
     cartao branco — ver o aviso logo acima. */
  :root:not([data-tema="claro"]){
  color-scheme: dark;
  --bg:#0b1622; --card:#11202e; --tx:#ecf2f8; --muted:#9db0c2; --linha:#2e455c;
  --navy:#11202e; --navy2:#16293a;
  /* ⚠ estes NAO clareiam: sao FUNDO de botao, com rotulo branco em cima.
     Clareados davam 1,74:1 no 'Quero a obra inteira'. Quem clareia no
     escuro e o par -tx abaixo, que e texto. */
  --amarelo-input:#3a3418;
  --sombra-sm:0 1px 2px rgba(0,0,0,.35);
  --sombra:0 1px 3px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
  --sombra-lg:0 24px 60px -28px rgba(0,0,0,.6);
  /* ⚠ os tokens de TEXTO tambem viram no escuro. Sem estas tres linhas o
     preco saia #0f2740 sobre #0b1622: 1,00:1, invisivel. */
  --navy-tx:#ecf2f8; --aco-tx:#6fb3e0; --verde-tx:#4ade80;
  --foco:#8fc9f0;
  /* superficies tingidas no escuro (medidas na home em 13/08/2026: chips MO/MAT/EQ
     a 6,62:1, 8,86:1 e 9,06:1 sobre o texto claro correspondente) */
  --card2:#16293a; --verde-suave:#12291c; --verde-borda:#1f5233;
  --aco-suave:#12283a; --ambar-suave:#2e2510; --ambar-tx:#fbbf24;
  --vermelho-tx:#f87171;   /* 5,98:1 sobre --card escuro */
  /* ⚠ no escuro --navy == --card (#11202e): o botao navy sumia dentro do cartao (1,00:1).
     Aco por baixo do rotulo branco: 5,41:1; e 3,06:1 contra o cartao, que e o minimo de
     componente. Vale para todas as paginas que linkam esta folha. */
  .btn-navy{background:var(--aco)}
}
  :root:not([data-tema="claro"]) .tema-bt .t-lua{display:block}
  :root:not([data-tema="claro"]) .tema-bt .t-sol{display:none}
}