:root{
    --tinta:#131F33; --tinta-2:#1B2A41; --tinta-3:#24344F;
    --latao:#C8963E; --latao-claro:#E0B662;
    --cal:#F5F2EC; --cal-2:#EDE8DF;
    --grafite:#242D3A; --cinza:#8B94A3; --linha:#2E3D57;
    --ok:#4CA97A; --raio:14px;
    font-size:16px;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
  html,body{height:100%; width:100%; overflow-x:hidden}
  body{
    font-family:"Archivo",system-ui,-apple-system,sans-serif;
    background:#0B121D; color:var(--cal);
    display:flex; align-items:center; justify-content:center; width:100vw; overflow:hidden;
  }
  #tela{
    width:100%; max-width:100vw; min-width:0; height:100dvh; background:var(--tinta);
    display:flex; flex-direction:column; overflow:hidden; position:relative;
  }
  .pagina, header, #tFalar .miolo, .painel-fala, #txt, .atalhos-obra{max-width:100%; min-width:0}
  @media (min-width:720px){
    #tela{
      width:min(406px, 100vw); height:844px; max-height:92vh;
      border-radius:40px; border:6px solid #060B13;
      box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 0 1px #1E2B41;
    }
  }
  button{font-family:inherit; border:0; cursor:pointer; background:none; color:inherit}
  header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 22px 10px; min-width:0}
  .marca{font-weight:900; letter-spacing:.14em; font-size:15px}
  .marca b{color:var(--latao)}
  .pagina{flex:1; display:flex; flex-direction:column; min-height:0}
  .oculta{display:none !important}

  #tFalar .miolo{flex:1; display:flex; flex-direction:column; padding:8px 22px max(18px, env(safe-area-inset-bottom)); min-height:0; overflow-y:auto}
  h1{font-weight:900; font-size:29px; line-height:1.05; letter-spacing:0; margin:6px 0 6px}
  h1, .apoio{overflow-wrap:anywhere}
  h1 .risco{color:var(--latao)}
  .apoio{color:var(--cinza); font-size:14px; line-height:1.45; margin-bottom:16px}
  #txt{
    flex:none; width:100%; resize:none; border-radius:var(--raio);
    background:var(--tinta-2); border:1px solid var(--linha);
    color:var(--cal); font-size:15.5px; line-height:1.55; padding:16px;
    font-family:inherit; outline:none; height:30vh; min-height:118px; max-height:40vh;
  }
  #txt:focus{border-color:var(--latao)}
  #txt::placeholder{color:#5E6980}
  .faixa-mic{display:flex; align-items:center; gap:14px; margin:16px 0 14px}
  #btnMic{
    width:64px; height:64px; border-radius:50%; flex:0 0 auto;
    background:var(--tinta-3); border:1.5px solid var(--linha);
    display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
    transition:transform .15s ease;
  }
  #btnMic:active{transform:scale(.94)}
  #btnMic svg{width:26px; height:26px; fill:var(--cal)}
  #btnMic.gravando{background:var(--latao); border-color:var(--latao)}
  #btnMic.gravando svg{fill:var(--tinta)}
  #btnMic.gravando::after{
    content:""; position:absolute; inset:-7px; border-radius:50%;
    border:2px solid var(--latao); animation:pulso 1.3s ease-out infinite;
  }
  @keyframes pulso{0%{transform:scale(.85); opacity:.9}100%{transform:scale(1.25); opacity:0}}
  .dica-mic{font-size:12.5px; color:var(--cinza); line-height:1.4}
  .dica-mic b{color:var(--cal); font-weight:700}
  .primario{
    width:100%; padding:17px; border-radius:var(--raio);
    background:var(--latao); color:#161309;
    font-weight:900; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
    transition:filter .15s ease, transform .1s ease;
  }
  .primario:active{transform:scale(.985)}
  .primario:disabled{filter:grayscale(.6) brightness(.7); cursor:default}
  .secundario{
    width:100%; padding:15px; border-radius:var(--raio);
    background:transparent; color:var(--latao); border:1.5px solid var(--latao);
    font-weight:900; font-size:14px; letter-spacing:.05em; text-transform:uppercase;
    margin-top:10px; transition:filter .15s ease, transform .1s ease;
  }
  .secundario:active{transform:scale(.985)}
  /* wordmark da marca: EMPREIT + AI destacado */
  .ai{color:var(--latao)}
  .marca{font-weight:900; letter-spacing:.04em}
  .marca-top{
    text-align:center; font-weight:900; font-size:22px; letter-spacing:.06em;
    margin-bottom:6px; color:var(--cal);
  }
  /* badge de plano (tela principal) */
  .plano-badge{
    align-self:flex-start; margin:0 0 12px; padding:7px 12px; border-radius:999px;
    background:rgba(200,150,62,.12); border:1px solid rgba(200,150,62,.35);
    color:var(--latao); font-size:12px; font-weight:800; letter-spacing:.02em;
  }
  /* cartões de planos */
  .plano-card{
    background:var(--tinta); border:1px solid var(--linha); border-radius:12px;
    padding:15px; margin-bottom:12px;
  }
  .plano-card.atual{border-color:var(--latao)}
  .plano-card h3{font-size:16px; margin-bottom:2px}
  .plano-atual-tag{font-size:11px; font-weight:800; color:var(--ok); text-transform:uppercase; letter-spacing:.06em; margin-left:6px}
  .plano-preco{color:var(--latao); font-weight:900; font-size:19px; margin-bottom:9px}
  .plano-preco small{color:var(--cinza); font-weight:700; font-size:12px}
  .plano-card ul{list-style:none; margin:0 0 12px}
  .plano-card li{font-size:13px; color:var(--cal); padding:3px 0 3px 19px; position:relative}
  .plano-card li:before{content:"\2713"; position:absolute; left:0; color:var(--ok); font-weight:900}

  #tMonta{align-items:stretch; justify-content:center; padding:0 26px}
  .passo{
    display:flex; align-items:center; gap:12px;
    padding:15px 2px; opacity:.22; transition:opacity .3s ease;
    border-bottom:1px solid var(--linha); position:relative;
  }
  .passo::after{
    content:""; position:absolute; left:0; bottom:-1px; height:2px; width:0;
    background:var(--latao); transition:width 1.6s cubic-bezier(.2,.7,.2,1);
  }
  .passo.ativo{opacity:1}
  .passo.ativo::after{width:100%}
  .passo.feito{opacity:.8}
  .passo.feito::after{width:100%}
  .passo .led{width:9px; height:9px; border-radius:50%; background:var(--linha); flex:0 0 auto}
  .passo.ativo .led{background:var(--latao); animation:pisca 1s ease infinite alternate}
  .passo.feito .led{background:var(--ok)}
  @keyframes pisca{to{opacity:.35}}
  .passo span{font-size:15.5px; font-weight:500}

  #tOrc{min-height:0}
  .topo-orc{padding:6px 22px 12px}
  .voltar{color:var(--cinza); font-size:13px; font-weight:700; letter-spacing:.04em; padding:6px 0}
  .titulo-orc{font-weight:900; font-size:23px; line-height:1.1; margin-top:6px}
  .sub-orc{color:var(--cinza); font-size:13px; margin-top:4px}
  #lista{
    flex:1; overflow-y:auto; padding:4px 22px 130px;
    background:var(--cal); color:var(--grafite);
    border-radius:22px 22px 0 0;
  }
  .secao-rotulo{
    font-size:10.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
    color:#9A937F; margin:18px 2px 6px;
  }
  .resumo{
    font-size:13.5px; line-height:1.5; color:#4A5261;
    background:var(--cal-2); border-radius:12px; padding:12px 14px;
  }
  .item{
    display:flex; gap:10px; padding:13px 2px;
    border-bottom:1px solid #E2DCD0; position:relative;
    opacity:0; transform:translateY(8px);
    animation:entra .45s ease forwards;
  }
  @keyframes entra{to{opacity:1; transform:none}}
  .item .num{font-size:11px; font-weight:900; color:#B3AC97; width:20px; flex:0 0 auto; padding-top:2px}
  .item .desc{flex:1; font-size:14px; font-weight:500; line-height:1.35}
  .badge{
    display:inline-block; font-size:9.5px; font-weight:900; letter-spacing:.06em;
    text-transform:uppercase; color:#1F6B45; background:#DDEFE4;
    border-radius:6px; padding:2.5px 7px; margin-top:5px;
  }
  .item .conta{color:#8A8371; font-size:12px; margin-top:4px}
  .item .preco{flex:0 0 auto; text-align:right; font-variant-numeric:tabular-nums}
  .item .preco .sub{font-weight:900; font-size:14.5px; color:var(--grafite)}
  .item .preco .unit{
    display:block; font-size:11.5px; color:#8A8371; margin-top:3px;
    border-bottom:1px dashed #C6BEA9; padding-bottom:1px;
  }
  .item .preco .unit.definir{color:#A8792B; font-weight:700; border-color:#C8963E}
  .item input.edita{
    width:92px; font:inherit; font-size:13px; text-align:right;
    border:1.5px solid var(--latao); border-radius:8px; padding:4px 6px;
    background:#fff; color:var(--grafite); outline:none;
  }
  .pendente{
    border:1.5px dashed var(--latao); border-radius:12px;
    padding:12px 14px; font-size:13px; line-height:1.45;
    color:#6B6250; background:#FBF7EE; margin-top:14px;
  }
  .pendente b{color:#8A6420}

  .barra{
    position:absolute; left:0; right:0; bottom:0;
    background:var(--tinta); border-top:1px solid var(--linha);
    padding:14px 22px calc(14px + env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:14px;
  }
  .barra .total .rot{font-size:10px; font-weight:900; letter-spacing:.14em; color:var(--cinza); text-transform:uppercase}
  .barra .total .val{font-weight:900; font-size:22px; font-variant-numeric:tabular-nums; color:var(--cal)}
  .barra .primario{flex:1; padding:15px}
  .mat-linha{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:13px}
  .mat-qtd{color:var(--latao); font-weight:800; white-space:nowrap}
  .mat-obs{font-size:11px; color:var(--cinza); margin-top:8px; line-height:1.4}
  .mat-compra{display:block; font-size:11px; color:var(--cinza); margin-top:2px}
  .mat-grupo{font-size:11px; color:var(--cinza); margin:10px 0 2px; text-transform:uppercase; letter-spacing:.06em}
  .rodape-app{text-align:center; font-size:10.5px; color:#A29B87; padding:14px 0 4px; letter-spacing:.03em}

  #aviso{
    position:absolute; left:22px; right:22px; bottom:96px; z-index:50;
    background:var(--tinta-2); border:1px solid var(--latao); color:var(--cal);
    border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.45;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
  }
  #aviso b{color:var(--latao-claro)}

  /* modal do código de acesso */
  #vLogin, #vCadastro, #vNovaSenha, #vCodigo{
    position:fixed; inset:0; width:100vw; z-index:40; background:rgba(7,12,20,.86);
    display:flex; align-items:flex-start; justify-content:flex-start;
    padding:26px; overflow-y:auto;
  }
  #vLogin .cartao, #vCadastro .cartao, #vNovaSenha .cartao, #vCodigo .cartao{margin:auto 0; width:calc(100vw - 52px); max-width:320px; min-width:0}

  /* escolha do jeito de criar conta: celular ou e-mail */
  .abas{display:flex; gap:8px; margin-bottom:14px}
  .abas button{
    flex:1; padding:11px 8px; border-radius:11px; font:inherit; font-size:13.5px;
    font-weight:800; color:var(--cinza);
    background:var(--tinta); border:1px solid var(--linha);
  }
  .abas button.ativa{color:var(--tinta); background:var(--latao); border-color:var(--latao)}

  /* campo do código de 6 dígitos: fonte grande, o cliente confere digitando */
  #codigoOtp{
    font-size:30px; font-weight:900; letter-spacing:.42em;
    padding:16px 14px 16px 22px; text-indent:.42em;
  }
  .destino-codigo{color:var(--latao-claro); font-weight:800}
  .cartao{
    width:100%; background:var(--tinta-2); border:1px solid var(--linha);
    border-radius:18px; padding:22px;
  }
  .cartao h2{font-weight:900; font-size:19px; margin-bottom:6px}
  .cartao p{color:var(--cinza); font-size:13px; line-height:1.45; margin-bottom:14px}
  .cartao input{
    width:100%; padding:14px; border-radius:12px; margin-bottom:12px;
    background:var(--tinta); border:1px solid var(--linha); color:var(--cal);
    font:inherit; font-size:16px; letter-spacing:.06em; outline:none; text-align:center;
  }
  .cartao input:focus{border-color:var(--latao)}

  /* acessos principais sempre visíveis no cabeçalho */
  .topo-acoes{display:flex; align-items:center; gap:6px; margin-left:auto; min-width:0}
  .btn-topo{
    min-height:38px; height:38px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    padding:0 9px; overflow:hidden;
    background:var(--tinta-3); border:1px solid var(--linha);
    color:var(--cinza); font-size:12px; font-weight:800;
    transition:transform .12s ease;
  }
  .btn-topo span{white-space:nowrap}
  .btn-topo:active{transform:scale(.94)}
  .btn-topo svg{width:17px; height:17px; flex:0 0 auto}
  .btn-historico-topo{width:112px; color:var(--latao-claro); border-color:rgba(217,179,106,.5)}
  .btn-historico-topo svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  .btn-perfil{width:88px; flex:0 0 88px}
  .btn-perfil svg{fill:currentColor}

  @media (max-width:380px){
    header{padding-left:16px; padding-right:16px; gap:7px}
    .marca{font-size:14px}
    .topo-acoes{gap:5px}
    .btn-topo{padding:0 7px; gap:5px; font-size:11px}
    .btn-historico-topo{width:101px}
    .btn-perfil{width:78px; flex-basis:78px}
    .btn-topo svg{width:15px; height:15px}
  }

  /* tela de perfil */
  #vPerfil, #vPrecos, #vPlanos, #vHistorico{
    position:fixed; inset:0; width:100vw; z-index:45; background:rgba(7,12,20,.86);
    display:flex; align-items:flex-start; justify-content:center;
    padding:20px 20px max(24px, env(safe-area-inset-bottom)); overflow-y:auto;
  }
  #vPerfil .cartao, #vPrecos .cartao, #vPlanos .cartao, #vHistorico .cartao{margin:auto 0; width:calc(100vw - 40px); max-width:366px; min-width:0}
  .topo-modal{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
  .topo-modal h2{margin:0}
  .fechar-x{
    flex:0 0 auto; width:38px; height:38px; border-radius:10px;
    background:rgba(255,255,255,.08); color:var(--cal); font-size:17px; font-weight:700; line-height:1;
  }
  .fechar-x:active{transform:scale(.92)}
  .acao-historico{margin-top:10px}
  .historico-cartao{max-height:calc(100dvh - 40px); overflow:hidden; display:flex; flex-direction:column}
  .historico-cartao > p{flex:0 0 auto}
  .historico-lista{
    flex:1; min-height:120px; max-height:58vh; overflow-y:auto;
    border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
  }
  .historico-estado{padding:28px 10px; margin:0 !important; text-align:center}
  .historico-item{
    width:100%; min-width:0; display:grid;
    grid-template-columns:minmax(0, 1fr) auto; gap:8px 14px;
    padding:15px 4px; text-align:left; border-bottom:1px solid var(--linha);
  }
  .historico-item:last-child{border-bottom:0}
  .historico-item:active{background:rgba(255,255,255,.04)}
  .historico-titulo{font-size:15px; font-weight:900; line-height:1.25; overflow-wrap:anywhere}
  .historico-total{font-size:15px; font-weight:900; color:var(--latao-claro); white-space:nowrap}
  .historico-meta{font-size:12px; color:var(--cinza); line-height:1.35; overflow-wrap:anywhere}
  .historico-abrir{align-self:end; font-size:12px; color:var(--latao); font-weight:800}
  /* lista de "meus preços" */
  .precos-carregando{color:var(--cinza); font-size:13px; text-align:center; padding:18px 0}
  .precos-grupo{
    font-size:10.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
    color:var(--latao); margin:16px 0 8px; padding-bottom:5px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .preco-linha{display:flex; align-items:center; gap:10px; margin-bottom:9px}
  .preco-info{flex:1; min-width:0; display:flex; flex-direction:column}
  .preco-desc{font-size:13px; line-height:1.25}
  .preco-unid{font-size:10.5px; color:var(--cinza); margin-top:2px}
  .preco-in{display:flex; align-items:center; gap:5px; flex:0 0 108px}
  .preco-in span{font-size:12px; color:var(--cinza)}
  .preco-in input{
    width:100%; padding:9px 8px; border-radius:9px; border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05); color:var(--cal); font-size:14px; text-align:right;
  }
  .campo{margin-bottom:12px}
  .aceite{
    display:flex; gap:9px; align-items:flex-start;
    margin:4px 0 14px; font-size:12.5px; color:var(--cinza); line-height:1.45;
  }
  .aceite input{width:17px; height:17px; margin-top:1px; flex:0 0 auto; accent-color:var(--latao)}
  .aceite a{color:var(--latao-claro)}
  .legal-links{
    display:flex; gap:16px; justify-content:center;
    margin-top:16px; font-size:11.5px;
  }
  .legal-links a{color:var(--cinza); text-decoration:none}
  .campo label{
    display:block; font-size:10.5px; font-weight:900; letter-spacing:.08em;
    text-transform:uppercase; color:var(--cinza); margin-bottom:5px;
  }
  .campo input, .campo textarea{
    width:100%; padding:12px; border-radius:10px;
    background:var(--tinta); border:1px solid var(--linha); color:var(--cal);
    font:inherit; font-size:15px; outline:none;
  }
  .campo input:focus, .campo textarea:focus{border-color:var(--latao)}
  .campo textarea{resize:none; min-height:58px; line-height:1.4}
  .link-fantasma{
    width:100%; padding:11px; margin-top:8px; text-align:center;
    color:var(--cinza); font-size:13px; font-weight:700; letter-spacing:.03em;
  }
  .logo-box{
    display:flex; align-items:center; gap:12px;
    background:var(--tinta); border:1px solid var(--linha);
    border-radius:10px; padding:10px;
  }
  .logo-prev{
    width:52px; height:52px; flex:0 0 auto; border-radius:8px;
    object-fit:contain; background:#fff; border:1px solid var(--linha);
  }
  .logo-vazio{
    width:52px; height:52px; flex:0 0 auto; border-radius:8px;
    border:1px dashed var(--linha); display:flex; align-items:center;
    justify-content:center; font-size:9.5px; color:var(--cinza); text-align:center; line-height:1.2;
  }
  .logo-acoes{display:flex; flex-direction:column; gap:6px; flex:1}
  .logo-btn{
    display:inline-block; text-align:center; cursor:pointer;
    padding:8px 10px; border-radius:8px; font-size:12.5px; font-weight:700;
    background:var(--tinta-3); border:1px solid var(--linha); color:var(--cal);
  }
  .logo-btn.remove{background:none; color:var(--cinza)}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  }

  /* UX simples para quem não tem costume com app */
  .guia-passo{
    align-self:flex-start;
    margin:0 0 10px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(76,169,122,.12);
    color:#8BD7AD;
    font-size:12px;
    font-weight:900;
  }
  .guia-passo.centro{align-self:center; margin-bottom:22px}
  #tFalar .miolo{gap:10px}
  #tFalar h1{font-size:31px; margin:0; line-height:1.06}
  #tFalar .apoio{font-size:15px; margin-bottom:4px}
  .painel-fala{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:22px 16px;
    border-radius:18px;
    background:var(--tinta-2);
    border:1px solid var(--linha);
  }
  .painel-fala #btnMic{
    width:104px;
    height:104px;
    background:var(--latao);
    border-color:var(--latao);
    box-shadow:0 16px 34px rgba(0,0,0,.28);
  }
  .painel-fala #btnMic svg{width:42px; height:42px; fill:var(--tinta)}
  .painel-fala .dica-mic{text-align:center; font-size:15px; color:var(--cal)}
  .painel-fala .dica-mic b{font-size:18px}
  .rotulo-texto{
    margin-top:4px;
    font-size:12px;
    font-weight:900;
    color:var(--cinza);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  #txt{
    height:24vh;
    min-height:104px;
    font-size:16px;
    border-radius:16px;
  }
  .atalhos-obra{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .atalhos-obra button{
    min-height:46px;
    border-radius:13px;
    background:var(--tinta-3);
    border:1px solid var(--linha);
    color:var(--cal);
    font-weight:900;
    font-size:14px;
  }
  .acao-grande{
    min-height:58px;
    font-size:16px;
  }
  #tMonta{
    padding:0 28px;
    justify-content:center;
  }
  #tMonta .passo span:last-child{
    font-size:17px;
    line-height:1.25;
  }
  .topo-orc .guia-passo{margin-top:4px}
  .voltar{
    min-height:40px;
    color:var(--latao);
    font-size:14px;
  }
  .titulo-orc{font-size:24px}
  #lista{
    padding:8px 18px 154px;
    border-radius:24px 24px 0 0;
  }
  .secao-rotulo{
    font-size:12px;
    color:#7E745F;
    margin-top:20px;
  }
  .resumo{
    font-size:15px;
    border-radius:14px;
    padding:14px;
  }
  .item{
    display:block;
    padding:14px;
    margin:10px 0;
    border:1px solid #E2DCD0;
    border-radius:14px;
    background:#FFFDF8;
  }
  .item .num{
    display:inline-flex;
    width:auto;
    min-width:28px;
    height:28px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#EDE8DF;
    color:#766B55;
    margin-bottom:8px;
  }
  .item .desc{
    font-size:16px;
    line-height:1.35;
  }
  .item .conta{
    margin-top:8px;
    font-size:14px;
  }
  .item .preco{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid #EFE8DB;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    text-align:left;
  }
  .item .preco .sub{
    font-size:18px;
  }
  .item .preco .unit{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:8px 10px;
    border:1px solid #C6BEA9;
    border-radius:10px;
    background:#FBF7EE;
    font-size:13px;
    font-weight:900;
  }
  .item .preco .unit.definir{
    background:#FFF2D8;
    color:#8A6420;
    border-color:#D3A44D;
  }
  .barra{
    align-items:stretch;
    gap:12px;
  }
  .barra .total{min-width:118px}
  .barra .total .val{font-size:21px}
  .nota-total{
    margin-top:3px;
    color:var(--cinza);
    font-size:11px;
    line-height:1.25;
  }

  @media (max-width:520px){
    #vLogin, #vCadastro, #vNovaSenha, #vCodigo{
      padding:16px;
    }
    #vLogin .cartao, #vCadastro .cartao, #vNovaSenha .cartao, #vCodigo .cartao{
      width:100%;
      max-width:320px;
      min-width:0;
      padding:20px 18px;
      border-radius:16px;
    }
    .cartao input,
    .campo input,
    .campo textarea{
      min-width:0;
      letter-spacing:0;
      text-align:left;
    }
    .primario,
    .secundario,
    .link-fantasma{
      min-width:0;
      white-space:normal;
      overflow-wrap:anywhere;
      line-height:1.25;
    }
    .marca-top{text-align:center}
  }


  #vLogin .cartao, #vCadastro .cartao, #vNovaSenha .cartao, #vCodigo .cartao{
    width:100%;
    max-width:320px;
    min-width:0;
  }

  .intro-obra, .entrada-obra{display:contents}
  .dica-desktop{display:none}

  /* Desktop web: aproveita o monitor sem alterar a experiência compacta do celular. */
  @media (min-width:900px){
    body{
      display:block;
      width:100%;
      min-width:900px;
      overflow:hidden;
      background:#0B121D;
    }
    #tela{
      width:100%;
      max-width:none;
      height:100dvh;
      max-height:none;
      border:0;
      border-radius:0;
      box-shadow:none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 72px 72px,
        var(--tinta);
    }
    header{
      position:relative;
      z-index:10;
      width:100%;
      min-height:72px;
      padding:0 max(40px, calc((100vw - 1200px) / 2));
      border-bottom:1px solid var(--linha);
      background:rgba(19,31,51,.96);
    }
    .marca{font-size:18px}
    .btn-topo{
      width:auto;
      min-width:112px;
      max-width:none;
      height:42px;
      padding:0 15px;
      border-radius:8px;
      font-size:13px;
    }
    .btn-perfil{flex-basis:auto; color:var(--cal)}
    .btn-topo:hover,
    .atalhos-obra button:hover,
    .fechar-x:hover{border-color:var(--latao); color:var(--latao-claro)}
    .primario:hover{filter:brightness(1.08)}

    #tFalar .miolo{
      width:100%;
      max-width:1200px;
      margin:0 auto;
      padding:48px 40px 56px;
      display:grid;
      grid-template-columns:minmax(300px, .82fr) minmax(400px, 1.18fr);
      gap:clamp(32px, 5vw, 72px);
      align-items:center;
      overflow-y:auto;
    }
    .intro-obra, .entrada-obra{display:block; min-width:0}
    .intro-obra{align-self:center}
    #tFalar h1{
      max-width:520px;
      margin:0 0 16px;
      font-size:46px;
      line-height:1.04;
    }
    #tFalar .apoio{
      max-width:520px;
      margin:0 0 28px;
      font-size:18px;
      line-height:1.55;
    }
    .guia-passo{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      margin-bottom:18px;
      border-radius:6px;
    }
    .painel-fala{
      max-width:520px;
      min-height:132px;
      padding:20px 24px;
      flex-direction:row;
      justify-content:flex-start;
      gap:22px;
      border-radius:8px;
      background:#19283E;
    }
    .painel-fala #btnMic{width:88px; height:88px}
    .painel-fala #btnMic svg{width:36px; height:36px}
    .painel-fala .dica-mic{text-align:left}
    .dica-mobile{display:none}
    .dica-desktop{display:inline}
    .entrada-obra{
      align-self:center;
      padding:28px;
      border:1px solid var(--linha);
      border-radius:8px;
      background:var(--tinta-2);
      box-shadow:0 24px 64px rgba(3,8,15,.28);
    }
    .rotulo-texto{
      display:block;
      margin:0 0 9px;
      font-size:13px;
    }
    #txt{
      height:280px;
      min-height:220px;
      max-height:none;
      border-radius:8px;
      background:#111D2F;
      font-size:17px;
      line-height:1.6;
      padding:20px;
    }
    .atalhos-obra{
      grid-template-columns:repeat(2, minmax(130px, 160px));
      justify-content:start;
      gap:10px;
      margin:12px 0 18px;
    }
    .atalhos-obra button{border-radius:8px}
    .acao-grande{min-height:60px; border-radius:8px}

    #tMonta{
      width:min(680px, calc(100% - 80px));
      margin:0 auto;
      padding:40px 0;
    }
    #tMonta .passo{padding:20px 4px}

    .topo-orc{
      width:min(1200px, calc(100% - 80px));
      margin:0 auto;
      padding:24px 0 18px;
    }
    .titulo-orc{font-size:30px}
    .sub-orc{font-size:15px}
    #lista{
      width:min(1200px, calc(100% - 80px));
      margin:0 auto;
      padding:12px 28px 132px;
      border-radius:8px 8px 0 0;
      box-shadow:0 24px 70px rgba(0,0,0,.2);
    }
    .resumo{font-size:15px; padding:16px 18px; border-radius:8px}
    .item{
      display:grid;
      grid-template-columns:40px minmax(0, 1fr) minmax(210px, auto);
      align-items:center;
      gap:16px;
      margin:0;
      padding:18px 4px;
      border:0;
      border-bottom:1px solid #E2DCD0;
      border-radius:0;
      background:transparent;
    }
    .item .num{margin:0}
    .item .desc{font-size:15px}
    .item .conta{font-size:13px}
    .item .preco{
      margin:0;
      padding:0;
      border:0;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      justify-content:center;
      gap:7px;
      text-align:right;
    }
    .item .preco .unit{margin:0; border-radius:8px}
    .barra{
      left:50%;
      right:auto;
      width:min(1200px, calc(100% - 80px));
      transform:translateX(-50%);
      padding:16px 28px;
      border:1px solid var(--linha);
      border-bottom:0;
      border-radius:8px 8px 0 0;
      box-shadow:0 -12px 32px rgba(8,14,24,.2);
    }
    .barra .total{min-width:260px}
    .barra .total .val{font-size:26px}
    .barra .primario{max-width:320px; margin-left:auto; border-radius:8px}

    #vLogin, #vCadastro, #vNovaSenha, #vCodigo,
    #vPerfil, #vPrecos, #vPlanos, #vHistorico{
      align-items:center;
      justify-content:center;
      padding:36px;
      background:rgba(5,10,17,.82);
    }
    #vLogin .cartao, #vCadastro .cartao,
    #vNovaSenha .cartao, #vCodigo .cartao{
      width:100%;
      max-width:430px;
      margin:auto;
      padding:32px;
      border-radius:8px;
      box-shadow:0 28px 80px rgba(0,0,0,.44);
    }
    #vPerfil .cartao{max-width:640px}
    #vPrecos .cartao{max-width:760px}
    #vPlanos .cartao{max-width:920px}
    #vHistorico .cartao{max-width:720px}
    #vPerfil .cartao, #vPrecos .cartao, #vPlanos .cartao, #vHistorico .cartao{
      width:100%;
      margin:auto;
      padding:30px;
      border-radius:8px;
    }
    #vCadastro .cartao, #vPerfil .cartao, #vPrecos .cartao{max-height:calc(100dvh - 72px); overflow-y:auto}
    .historico-item{padding:17px 8px}
    .historico-item:hover{background:rgba(255,255,255,.035)}
  }