/* ============================================================
   condgest.pt — site público.

   O sistema visual da plataforma é denso e utilitário, porque se
   trabalha nele todos os dias. Este é o contrário: respira, e
   tem uma coisa a dizer por ecrã.

   O que os dois partilham é a família e o laranja da marca. O
   resto é próprio: a tipografia de título usa o eixo de largura
   do Archivo (wdth 118) — a mesma letra da aplicação, esticada,
   que é o que a torna reconhecível sem ser a mesma coisa.

   Os cinzentos têm uma inclinação fria de propósito: fazem o
   laranja da marca ler mais quente sem lhe mexer.
   ============================================================ */

:root{
  --papel:#FBFBFC;
  --papel-2:#F2F4F7;
  --papel-3:#E8ECF1;
  --linha:#DFE4EA;
  --linha-fina:#EDF0F4;
  --tinta:#101216;
  --tinta-2:#3E4550;
  --murmurio:#6E7885;
  --laranja:#CE5123;
  --laranja-fundo:#FAEEE8;
  --laranja-fundo-2:#F3DACE;
  --aco:#1D4E5F;
  --aco-fundo:#E7F0F3;
  --verde:#2C7A55;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --medida:64ch;
  --r:8px;
  --sombra:0 1px 2px rgba(16,18,22,.04),0 18px 40px -28px rgba(16,18,22,.24);
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --papel:#0C0E11;
  --papel-2:#14171C;
  --papel-3:#1C2127;
  --linha:#282E36;
  --linha-fina:#1F242B;
  --tinta:#ECEEF1;
  --tinta-2:#B4BBC4;
  --murmurio:#868F9B;
  --laranja:#E86A3B;
  --laranja-fundo:#25150F;
  --laranja-fundo-2:#37200F;
  --aco:#84C0D2;
  --aco-fundo:#122228;
  --verde:#5CB98A;
  --sombra:0 1px 2px rgba(0,0,0,.5),0 18px 40px -28px rgba(0,0,0,.8);
}}

:root[data-theme="dark"]{
  --papel:#0C0E11; --papel-2:#14171C; --papel-3:#1C2127;
  --linha:#282E36; --linha-fina:#1F242B;
  --tinta:#ECEEF1; --tinta-2:#B4BBC4; --murmurio:#868F9B;
  --laranja:#E86A3B; --laranja-fundo:#25150F; --laranja-fundo-2:#37200F;
  --aco:#84C0D2; --aco-fundo:#122228; --verde:#5CB98A;
}

*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--laranja);text-decoration-thickness:1px;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.salto{position:absolute;left:-9999px}
.salto:focus{left:12px;top:12px;z-index:50;background:var(--papel);
  padding:10px 14px;border:1px solid var(--linha);border-radius:var(--r)}

/* ------------------------------------------------------ tipografia */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.028em;
  font-variation-settings:'wdth' 118;text-wrap:balance;line-height:1.08}
h1{font-size:clamp(2rem,4.1vw,3.15rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h3{font-size:1.16rem;letter-spacing:-.018em;font-variation-settings:'wdth' 110;line-height:1.3}
h4{font-size:.98rem;letter-spacing:-.01em;font-variation-settings:'wdth' 105}
p{margin:0 0 1em;max-width:var(--medida)}
p:last-child{margin-bottom:0}
.grande{font-size:clamp(1.05rem,1.9vw,1.28rem);color:var(--tinta-2);line-height:1.55}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.murmurio{color:var(--murmurio)}
.pequeno{font-size:.86rem}

/* A sobrancelha não é decoração: identifica sempre o artigo, a norma
   ou o número que a secção invoca. */
.sobrancelha{font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--laranja);
  margin:0 0 14px;display:block}
.sobrancelha-aco{color:var(--aco)}

/* ------------------------------------------------------ estrutura */
.envelope{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:clamp(56px,8vw,104px) 0}
section+section{border-top:1px solid var(--linha-fina)}
.dupla{display:grid;gap:clamp(28px,5vw,64px);align-items:start}
@media(min-width:900px){.dupla{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dupla-larga{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .dupla-estreita{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.cartoes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}

/* ------------------------------------------------------ cabeçalho */
.cabeca{position:sticky;top:0;z-index:30;background:var(--papel);
  border-bottom:1px solid var(--linha-fina)}
.faixa{max-width:1140px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.marca{display:block;line-height:0;margin-right:auto}
.marca img{width:168px}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav>a{color:var(--tinta-2);text-decoration:none;font-size:.92rem;font-weight:500;
  padding:8px 11px;border-radius:6px}
.nav>a:hover{background:var(--papel-2);color:var(--tinta)}
.nav>a[aria-current="page"]{color:var(--laranja);background:var(--laranja-fundo)}
.menu-caixa,.menu-botao{display:none}

@media(max-width:900px){
  .menu-botao{display:grid;gap:4px;padding:10px;cursor:pointer;border-radius:6px}
  .menu-botao span{display:block;width:20px;height:2px;background:var(--tinta)}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;
    padding-bottom:10px}
  .menu-caixa:checked ~ .nav{display:flex}
  .nav>a{padding:11px 12px}
  .nav>.botao{text-align:center;margin-top:6px}
}

/* ------------------------------------------------------ botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:.95rem;font-weight:600;text-decoration:none;
  padding:11px 18px;border-radius:7px;border:1px solid var(--linha);
  background:var(--papel);color:var(--tinta);cursor:pointer;white-space:nowrap}
.botao:hover{border-color:var(--murmurio)}
.botao-cheio{background:var(--laranja);border-color:var(--laranja);color:#fff}
.botao-cheio:hover{background:#B44520;border-color:#B44520}
:root[data-theme="dark"] .botao-cheio{color:#160B05}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .botao-cheio{color:#160B05}}
.botao-grande{padding:14px 24px;font-size:1.02rem}
.acoes{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
.acoes-nota{font-size:.86rem;color:var(--murmurio)}

/* ------------------------------------------------------ herói */
.heroi{padding-top:clamp(44px,6vw,76px);padding-bottom:clamp(44px,6vw,76px)}
.heroi h1{margin-bottom:18px}
.heroi .grande{max-width:46ch}
.selos{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--murmurio)}
.selos b{color:var(--tinta);font-weight:600}

/* --------------------------------------- o mapa de repartição (herói) */
/* O produto num objeto: um orçamento a dividir-se por frações e a somar
   exatamente ao total. É a coisa mais característica deste mundo. */
.mapa{background:var(--papel-2);border:1px solid var(--linha);border-radius:12px;
  box-shadow:var(--sombra);overflow:hidden}
.mapa-cabeca{padding:16px 20px;border-bottom:1px solid var(--linha);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.mapa-cabeca h3{font-size:1rem}
.mapa-cabeca span{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--murmurio)}
.mapa table{width:100%;border-collapse:collapse;font-size:.92rem}
.mapa th,.mapa td{padding:9px 20px;text-align:left;border-bottom:1px solid var(--linha-fina)}
.mapa th{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--murmurio);font-weight:500}
.mapa td.n,.mapa th.n{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums}
.mapa tfoot td{border-bottom:0;border-top:2px solid var(--linha);font-weight:700;
  background:var(--papel-3)}
.mapa-nota{padding:14px 20px;border-top:1px solid var(--linha);font-size:.86rem;
  color:var(--murmurio);background:var(--papel)}
.mapa-nota b{color:var(--verde)}
.mapa-controlo{padding:14px 20px;border-bottom:1px solid var(--linha);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:.88rem}
.mapa-controlo label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--murmurio)}
.mapa-controlo input{font:inherit;font-family:var(--mono);width:9ch;padding:7px 9px;
  border:1px solid var(--linha);border-radius:6px;background:var(--papel);color:var(--tinta);
  text-align:right}

/* ------------------------------------------------------ cartões */
.cartao{background:var(--papel-2);border:1px solid var(--linha);
  border-radius:var(--r);padding:20px 22px}
.cartao h3{margin-bottom:7px}
.cartao p{font-size:.94rem;color:var(--tinta-2);margin:0}
.cartao-limpo{background:none;border:0;border-top:2px solid var(--tinta);
  border-radius:0;padding:16px 0 0}
.cartao-laranja{background:var(--laranja-fundo);border-color:var(--laranja-fundo-2)}

/* Lista de normas: o artigo à esquerda em monospace, o que obriga à direita. */
.normas{list-style:none;margin:0;padding:0;display:grid;gap:0}
.normas li{display:grid;gap:4px 22px;padding:16px 0;border-bottom:1px solid var(--linha-fina)}
@media(min-width:700px){.normas li{grid-template-columns:190px minmax(0,1fr)}}
.normas li:last-child{border-bottom:0}
.normas .artigo{font-family:var(--mono);font-size:.79rem;
  color:var(--laranja);font-weight:500;line-height:1.5}
.normas h3{font-size:1rem;margin-bottom:3px}
.normas p{font-size:.93rem;color:var(--tinta-2);margin:0}

/* Passos numerados — só onde a ordem importa de verdade. */
.passos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:0}
.passos li{counter-increment:p;display:grid;gap:4px 22px;padding:20px 0;
  border-bottom:1px solid var(--linha-fina)}
@media(min-width:700px){.passos li{grid-template-columns:56px minmax(0,1fr)}}
.passos li::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);
  font-size:.9rem;color:var(--laranja);font-weight:600}
.passos li:last-child{border-bottom:0}
.passos h3{margin-bottom:4px}
.passos p{font-size:.95rem;color:var(--tinta-2)}

/* ------------------------------------------------------ tabelas */
.tabela-rola{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--r);
  background:var(--papel-2)}
table.dados{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px}
table.dados th,table.dados td{padding:11px 16px;text-align:left;
  border-bottom:1px solid var(--linha-fina)}
table.dados thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--murmurio);font-weight:500;
  background:var(--papel-3);white-space:nowrap}
table.dados td.n,table.dados th.n{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.dados tbody tr:last-child td{border-bottom:0}
table.dados .sim{color:var(--verde);font-weight:600}
table.dados .nao{color:var(--murmurio)}

/* ------------------------------------------------------ preços */
.planos{display:grid;gap:16px;align-items:start}
@media(min-width:860px){.planos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plano{background:var(--papel-2);border:1px solid var(--linha);border-radius:12px;
  padding:24px;display:flex;flex-direction:column;gap:14px}
.plano-destaque{border-color:var(--laranja);box-shadow:var(--sombra)}
.plano-etiqueta{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--laranja)}
.plano-valor{font-family:var(--mono);font-size:2.1rem;font-weight:600;
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.plano-valor small{font-family:var(--sans);font-size:.86rem;font-weight:400;
  color:var(--murmurio);letter-spacing:0}
.plano ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.92rem;
  color:var(--tinta-2)}
.plano ul li{padding-left:20px;position:relative}
.plano ul li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--laranja)}
.plano .botao{margin-top:auto}

.ciclos-escolha{display:inline-flex;border:1px solid var(--linha);border-radius:8px;
  overflow:hidden;background:var(--papel-2);flex-wrap:wrap}
.ciclos-escolha label{padding:9px 15px;font-size:.9rem;font-weight:500;cursor:pointer;
  border-right:1px solid var(--linha);color:var(--tinta-2)}
.ciclos-escolha label:last-child{border-right:0}
.ciclos-escolha input{position:absolute;opacity:0;width:0;height:0}
.ciclos-escolha label:has(input:checked){background:var(--laranja);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])
  .ciclos-escolha label:has(input:checked){color:#160B05}}
.ciclos-escolha label:has(input:focus-visible){outline:2px solid var(--laranja);
  outline-offset:-2px}
.ciclos-escolha em{font-style:normal;font-family:var(--mono);font-size:.74rem;
  opacity:.85;margin-left:5px}

/* Calculadora. */
.calc{background:var(--papel-2);border:1px solid var(--linha);border-radius:12px;
  padding:22px;display:grid;gap:18px}
.calc-linha{display:grid;gap:8px}
.calc-linha>span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--murmurio)}
.calc input[type=range]{width:100%;accent-color:var(--laranja)}
.calc-num{display:flex;gap:10px;align-items:baseline}
.calc-num strong{font-family:var(--mono);font-size:1.5rem;font-weight:600}
.calc-addons{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.calc-addons label{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;
  padding:9px 11px;border:1px solid var(--linha);border-radius:7px;cursor:pointer;
  background:var(--papel)}
.calc-addons label:has(input:checked){border-color:var(--laranja);background:var(--laranja-fundo)}
.calc-total{border-top:2px solid var(--tinta);padding-top:16px;display:grid;gap:6px}
.calc-total-valor{font-family:var(--mono);font-size:2.4rem;font-weight:600;
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.calc-detalhe{list-style:none;margin:0;padding:0;font-size:.9rem;display:grid;gap:5px}
.calc-detalhe li{display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.calc-detalhe .desconto{color:var(--verde)}

/* ------------------------------------------------------ citação */
.citacao{border-left:3px solid var(--laranja);padding:4px 0 4px 22px;margin:0}
.citacao p{font-size:1.12rem;line-height:1.5}
.citacao cite{font-style:normal;font-family:var(--mono);font-size:.78rem;
  color:var(--murmurio);letter-spacing:.06em}

/* ------------------------------------------------------ chamada final */
.chamada{background:var(--papel-2);border-top:1px solid var(--linha)}
.chamada .envelope{padding-top:clamp(52px,7vw,88px);padding-bottom:clamp(52px,7vw,88px)}

/* ------------------------------------------------------ rodapé */
.rodape{border-top:1px solid var(--linha);background:var(--papel);
  padding:clamp(40px,5vw,64px) 24px 28px}
.rodape-grelha{max-width:1140px;margin:0 auto;display:grid;gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.rodape-marca img{width:150px;margin-bottom:12px}
.rodape-marca p{font-size:.88rem;color:var(--murmurio);max-width:34ch}
.rodape nav{display:grid;gap:7px;align-content:start}
.rodape h3{font-size:.72rem;font-family:var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--murmurio);font-weight:500;margin-bottom:3px}
.rodape nav a{color:var(--tinta-2);text-decoration:none;font-size:.92rem}
.rodape nav a:hover{color:var(--laranja)}
.rodape-fino{max-width:1140px;margin:36px auto 0;padding-top:20px;
  border-top:1px solid var(--linha-fina);font-size:.8rem;color:var(--murmurio)}
.rodape-fino .ponto{margin:0 6px}

/* ------------------------------------------------------ formulários */
.campo{display:grid;gap:7px}
.campo>label,.campo-rotulo{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--murmurio)}
.campo input,.campo textarea,.campo select{font:inherit;padding:10px 12px;
  border:1px solid var(--linha);border-radius:7px;background:var(--papel);
  color:var(--tinta);width:100%}
.campo input:focus,.campo textarea:focus{border-color:var(--laranja);outline:none;
  box-shadow:0 0 0 3px var(--laranja-fundo)}
.campo-curto input{width:10ch;font-family:var(--mono);text-align:right}
.isco{position:absolute;left:-9999px}

/* ------------------------------------------------------ espaçamentos */
/* Poucos e nomeados: o espaço entre um título e o parágrafo que o segue
   repete-se em todas as páginas e não tem de ser escrito em cada uma. */
.esp-s{margin-top:14px}
.esp{margin-top:26px}
.esp-l{margin-top:36px}
.sem-margem{margin:0}
.coluna-unica{grid-template-columns:1fr}

/* ------------------------------------------------------ módulo (add-on) */
.addons{display:grid;gap:14px;margin-top:36px}
.addon{display:grid;gap:14px}
.addon-topo{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  align-items:baseline}
.addon-preco{text-align:right;white-space:nowrap;font-family:var(--mono);
  font-variant-numeric:tabular-nums}
.addon-preco b{font-size:1.05rem}
.addon-preco .incluido{color:var(--verde)}
.addon-pontos{list-style:none;margin:0;padding:0;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.addon-pontos li{padding-left:20px;position:relative;font-size:.9rem;color:var(--tinta-2)}
.addon-pontos li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--laranja)}

/* Cartão que é todo ele um link. */
a.cartao{text-decoration:none;color:inherit;display:block}
a.cartao:hover{border-color:var(--laranja)}
a.cartao h3{color:var(--tinta)}
/* Grau de conformidade — semântico, e por isso independente da marca. */
.grau-critica{color:var(--laranja)}
.grau-aviso{color:#9A6A0B}
.grau-conforme{color:var(--verde)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .grau-aviso{color:#D2A03E}}
:root[data-theme="dark"] .grau-aviso{color:#D2A03E}

/* ------------------------------------------------------- manutenção */
.manutencao{display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:40px 0}
.manutencao .envelope{max-width:620px;text-align:left}
.manut-logo{width:180px;height:auto;display:block;margin-bottom:34px}
.manutencao h1{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:16px}
.manut-caixa{margin-top:38px;padding-top:26px;border-top:1px solid var(--linha)}
.manut-caixa h2{font-size:1.05rem;margin-bottom:8px}
.manut-caixa p{font-size:.95rem;color:var(--murmurio)}