/* ⚠ 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;
}
  *{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 ===== */
  #demo{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
  .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:#e8edf3;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:#fff;border-bottom-color:var(--verde-tx)}
  .fbar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:#fafcfe;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:#eef3f9;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:11.5px;position:sticky;top:0}
  .grade td{padding:6px 9px;border-bottom:1px solid var(--linha);cursor:default}
  .grade tr:nth-child(even) td{background:#f4f7fb}
  .grade tr.etapa td{background:var(--aco);color:#fff;font-weight:700}
  .grade tr.sub td{background:#e2e8f0;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:#fafcfe;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:#ecfdf5;border:1px solid #bbf7d0;color:#166534;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}
  .nao{color:#cbd5e1;font-weight:700}
  .meio{color:var(--ambar);font-weight:700;font-size:12.5px}
  .col-orca{background:#f0fdf4}

  /* ===== 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:40px;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:40px}
    /* simulador legível: a tabela rola de lado em vez de espremer 9 colunas */
    .grade{min-width:720px}
    .dica-deslize{display:block!important}
  }

/* ⚠ 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;
}

/* ⚠ O ESCURO AUTOMATICO ESTA DESLIGADO — de proposito, e temporariamente.
   Ele trocava os tokens (texto para #ecf2f8) mas as 5 paginas tem
   `background:#fff` cravado no <style> proprio, que token nenhum alcanca:
   dava texto branco sobre cartao branco no navegador de quem usa modo escuro.
   Enquanto as superficies nao estiverem em token, o escuro so entra por
   escolha explicita no botao ([data-tema="dark"]), que a pessoa desfaz.
   Religar o automatico = devolver o bloco @media (prefers-color-scheme: dark)
   apontando para os mesmos valores de [data-tema="dark"] abaixo. */
: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;
}

/* 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;
}
  :root:not([data-tema="claro"]) .tema-bt .t-lua{display:block}
  :root:not([data-tema="claro"]) .tema-bt .t-sol{display:none}
}