/* GERADO por marca/redes/demos/publicar.py — não editar aqui.
   A fonte é marca/redes/demos/volt-demo.css. */
/* ===========================================================================
   Volt Studio · sistema dos mockups de setor
   ---------------------------------------------------------------------------
   Dois ecrãs por setor, ambos numa tela fixa de 1400×1050 (é o que o Chrome
   headless captura para ../img/):

     setor.html          o SITE — o que o cliente do negócio vê.
     setor-painel.html   o PAINEL — o que o dono do negócio vê por dentro.

   Todos os negócios aqui são FICTÍCIOS. O desenho é o sistema Volt aplicado
   a sério; as funcionalidades são as que o studio sabe construir.

   Não editar tamanhos nem cores nos ficheiros de setor — vivem aqui.
   =========================================================================== */

@font-face{font-family:'Archivo';font-weight:400;font-display:swap;
  src:url('/assets/fontes/Archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-display:swap;
  src:url('/assets/fontes/Archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-display:swap;
  src:url('/assets/fontes/Archivo-700.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:800;font-display:swap;
  src:url('/assets/fontes/Archivo-800.woff2') format('woff2')}

:root{
  --laranja:#FF5A1F; --laranja-escuro:#E64A12; --tint:#FFEDE5;
  --tinta:#16181C; --papel:#F8F7F5; --branco:#FFF; --meta:#5E626A; --linha:#E4E1DC;
}
*{box-sizing:border-box;margin:0}

body{
  width:1400px;height:1050px;overflow:hidden;
  font-family:'Archivo',sans-serif;font-size:19px;line-height:1.6;
  background:var(--fundo);color:var(--texto);
  --fundo:var(--papel);--texto:var(--tinta);--suave:var(--tinta);
  --espinha:var(--linha);--borda:var(--linha);--superficie:var(--branco);
}
body.escuro{
  --fundo:var(--tinta);--texto:var(--papel);--suave:#B4B9C0;
  --meta:#9AA0A8;--espinha:#2A2E35;--borda:#2A2E35;--superficie:#1D2026;
}

/* ==========================================================================
   ECRÃ 1 · SITE
   ========================================================================== */

.topo{
  display:flex;align-items:center;gap:36px;
  padding:26px 64px;border-bottom:1px solid var(--borda);
}
.marca{font-family:'Archivo';font-weight:800;font-size:27px;letter-spacing:-.022em;margin-right:auto}
.marca b{color:var(--laranja)}
.topo nav{display:flex;gap:30px}
.topo nav span{font-weight:600;font-size:16px}
.cta{
  font-family:'Archivo';font-weight:700;font-size:16px;
  background:var(--laranja);color:var(--tinta);
  padding:13px 24px;border-radius:999px;
}
.hero{position:relative;padding:96px 64px 0 120px}
.hero::before{content:"";position:absolute;left:64px;top:100px;bottom:-40px;width:2px;background:var(--espinha)}
.etiqueta{
  position:relative;font-family:'Archivo';font-weight:600;font-size:13.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--meta);margin-bottom:30px;
}
.etiqueta::before{content:"";position:absolute;left:-56px;top:.62em;width:38px;height:2px;background:var(--laranja)}
h1{font-family:'Archivo';font-weight:800;font-size:88px;line-height:.99;letter-spacing:-.028em;margin-bottom:34px}
.sub{max-width:56ch;font-size:22px;color:var(--suave);margin-bottom:44px}
.accoes{display:flex;gap:18px;margin-bottom:76px}
.botao{
  font-family:'Archivo';font-weight:700;font-size:19px;
  padding:19px 32px;border-radius:999px;border:2px solid transparent;
}
.botao--laranja{background:var(--laranja);color:var(--tinta)}
.botao--vazio{border-color:var(--borda);color:var(--texto)}
.factos{max-width:860px}
.regua{height:4px;display:flex;margin-bottom:34px}
.regua i{background:var(--espinha);flex:93}
.regua b{background:var(--laranja);flex:7}
dl{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
dt{font-family:'Archivo';font-weight:800;font-size:40px;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
dd{font-family:'Archivo';font-weight:600;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta);margin-top:8px}

/* Título mais curto quando o setor precisa de três linhas em vez de duas. */
h1.h1--sm{font-size:72px}

/* ==========================================================================
   ECRÃ 2 · PAINEL
   O painel não é um site com menu lateral: é dados a mostrar estado. Por isso
   respira menos, marca o metadado em maiúsculas com tracking largo e reserva
   o laranja para uma coisa só por ecrã — aquilo que exige acção.
   ========================================================================== */

body.painel{display:grid;grid-template-columns:296px 1fr}

/* ---- barra lateral ---- */
.lado{
  border-right:1px solid var(--borda);padding:30px 0;
  display:flex;flex-direction:column;background:var(--superficie);
}
.lado .marca{margin:0 30px 34px;font-size:24px}
.lado__grupo{
  font-family:'Archivo';font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--meta);margin:0 30px 12px;
}
.lado__grupo + .lado__grupo{margin-top:30px}
.menu{list-style:none;padding:0;margin:0 0 6px}
.menu li{
  display:flex;align-items:center;gap:12px;
  padding:11px 30px;font-weight:600;font-size:17px;color:var(--suave);
}
.menu li b{
  margin-left:auto;font-family:'Archivo';font-weight:600;font-size:12px;
  letter-spacing:.06em;color:var(--meta);
}
.menu li.on{
  color:var(--texto);background:var(--fundo);
  box-shadow:inset 3px 0 0 var(--laranja);
}
.menu li.on b{color:var(--laranja)}
.lado__pe{
  margin-top:auto;padding:20px 30px 0;border-top:1px solid var(--borda);
  display:flex;align-items:center;gap:12px;
}
.avatar{
  width:38px;height:38px;border-radius:999px;flex:none;
  background:var(--laranja);color:var(--tinta);
  font-family:'Archivo';font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.lado__pe span{font-weight:600;font-size:16px;line-height:1.25}
.lado__pe em{
  display:block;font-family:'Archivo';font-weight:600;font-style:normal;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--meta);
}

/* ---- corpo ---- */
.painel__corpo{padding:34px 44px;overflow:hidden}
.barra{display:flex;align-items:flex-end;gap:14px;margin-bottom:30px}
.barra__t{margin-right:auto}
.barra h2{
  font-family:'Archivo';font-weight:800;font-size:40px;
  letter-spacing:-.026em;line-height:1;
}
.barra .etiqueta{margin:0 0 10px}
.barra .etiqueta::before{display:none}
.pilula{
  font-family:'Archivo';font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--borda);padding:9px 15px;border-radius:999px;color:var(--meta);
}
.pilula--laranja{background:var(--laranja);border-color:var(--laranja);color:var(--tinta)}

/* ---- indicadores ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--borda);
  border:1px solid var(--borda);margin-bottom:26px}
.kpi{background:var(--superficie);padding:18px 20px 20px}
.kpi u{
  display:block;text-decoration:none;font-family:'Archivo';font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin-bottom:10px;
}
.kpi strong{font-family:'Archivo';font-weight:800;font-size:33px;letter-spacing:-.022em;line-height:1;font-variant-numeric:tabular-nums}
.kpi small{display:block;font-size:14px;line-height:1.35;color:var(--meta);margin-top:7px}
.kpi--sinal strong{color:var(--laranja)}

/* ---- duas colunas, e a faixa larga por baixo ---- */
/* Altura fixa: a tela tem 1050 px e a série tem de bater certo de setor para
   setor. Se um bloco não couber, corta-se conteúdo — não se estica a caixa. */
.duas{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin-bottom:24px;height:424px}
.duas--igual{grid-template-columns:1fr 1fr}
.larga{display:block;height:279px}
.bloco{border:1px solid var(--borda);background:var(--superficie);padding:20px 22px 22px;
  overflow:hidden}
.bloco h3{
  font-family:'Archivo';font-weight:700;font-size:19px;letter-spacing:-.014em;
  display:flex;align-items:baseline;gap:12px;margin-bottom:14px;
  white-space:nowrap;
}
.bloco h3 u{
  margin-left:auto;text-decoration:none;font-family:'Archivo';font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);
}

/* ---- lista de linhas (o padrão de dados do painel) ---- */
.linhas{list-style:none;padding:0;margin:0}
.linhas li{
  display:flex;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--borda);font-size:16.5px;
}
.linhas li:last-child{border-bottom:0;padding-bottom:0}
.linhas b{font-weight:600;white-space:nowrap}
.linhas i{font-style:normal;color:var(--meta);font-size:14.5px;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.linhas .dir{margin-left:auto;text-align:right;white-space:nowrap}
.linhas .num{font-family:'Archivo';font-weight:600;font-size:15px;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* marcador de estado antes do nome */
.ponto{width:9px;height:9px;flex:none;background:var(--laranja)}
.ponto--ok{background:#2E9E5B}
.ponto--espera{background:var(--meta)}

/* etiqueta de estado à direita */
.estado{
  font-family:'Archivo';font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--borda);padding:5px 10px;color:var(--meta);
}
.estado--activo{border-color:var(--laranja);color:var(--laranja)}
.estado--ok{border-color:#2E9E5B;color:#2E9E5B}

/* ---- barra de progresso / fases ---- */
.fases{list-style:none;padding:0;margin:0}
.fases li{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--borda);font-size:16.5px}
.fases li:last-child{border-bottom:0}
.fases em{
  font-style:normal;font-family:'Archivo';font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--meta);
}
.fases li.feita em{color:#2E9E5B}
.fases li.agora{font-weight:600}
.fases li.agora em{color:var(--laranja)}
/* quando a primeira coluna é uma data em vez de um número de ordem */
.fases--datas li{grid-template-columns:76px 1fr auto}
.barrinha{height:6px;background:var(--borda);margin-top:16px;display:flex}
.barrinha i{background:var(--laranja)}

/* ---- calendário / grelha semanal ---- */
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--borda);
  border:1px solid var(--borda)}
.semana div{background:var(--superficie);padding:11px 10px 13px;min-height:86px}
/* na faixa larga a semana tem de encher a caixa, senão sobra branco */
.larga .semana div{min-height:128px}
.semana u{
  display:block;text-decoration:none;font-family:'Archivo';font-weight:600;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin-bottom:9px;
}
.semana span{
  display:block;font-size:13.5px;line-height:1.35;padding:5px 7px;margin-bottom:4px;
  background:var(--fundo);border-left:2px solid var(--borda);
}
.semana span.cheio{border-left-color:var(--laranja)}
.semana div.hoje{box-shadow:inset 0 3px 0 var(--laranja)}

/* ---- barras mensais (dinheiro ao longo do tempo) ---- */
/* A altura de cada barra é calculada a partir do valor que está por cima —
   assim a barra é sempre honesta em relação ao número. Vem em classe e não
   em style="": o site serve estes ficheiros com CSP style-src 'self', que
   bloqueia atributos style. Inline, as barras achatavam em produção — e só
   em produção, que é onde não se vê a tempo. */
.barras{display:grid;gap:20px;align-items:end;margin-top:4px}
.barras div{display:flex;flex-direction:column;justify-content:flex-end;gap:9px}
.barras b{font-family:'Archivo';font-weight:800;font-size:19px;letter-spacing:-.014em;font-variant-numeric:tabular-nums}
.barras i{display:block;background:var(--borda)}
.barras u{
  text-decoration:none;font-family:'Archivo';font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--meta);
}
.barras div.on i{background:var(--laranja)}
.barras div.on b{color:var(--laranja)}
.barras div.previsto i{background:repeating-linear-gradient(
  135deg,var(--borda) 0 6px,transparent 6px 12px)}

/* alturas das barras (ver o comentário acima) */
.barras i.alt-6{height:6px}
.barras i.alt-15{height:15px}
.barras i.alt-24{height:24px}
.barras i.alt-26{height:26px}
.barras i.alt-29{height:29px}
.barras i.alt-31{height:31px}
.barras i.alt-32{height:32px}
.barras i.alt-36{height:36px}
.barras i.alt-41{height:41px}
.barras i.alt-43{height:43px}
.barras i.alt-44{height:44px}
.barras i.alt-45{height:45px}
.barras i.alt-48{height:48px}
.barras i.alt-56{height:56px}
.barras i.alt-58{height:58px}
.barras i.alt-63{height:63px}
.barras i.alt-65{height:65px}
.barras i.alt-68{height:68px}
.barras i.alt-70{height:70px}
.barras i.alt-72{height:72px}
/* número de colunas da grelha de barras */
.barras--5{grid-template-columns:repeat(5,1fr)}
.barras--6{grid-template-columns:repeat(6,1fr)}
/* progresso da barrinha, pela mesma razão */
.barrinha i.larg-62{width:62%}
.barrinha i.larg-71{width:71%}
.barrinha i.larg-82{width:82%}

/* ---- nota que explica o bloco (é o argumento de venda, não decoração) ---- */
.nota-bloco{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--borda);
  font-size:15px;line-height:1.45;color:var(--meta);
}

/* ---- troca de mensagens (diário, comentário do treinador, chat) ---- */
.fala{border-left:2px solid var(--borda);padding:2px 0 2px 18px;margin-bottom:18px}
.fala--resposta{border-left-color:var(--laranja)}
.fala p{font-size:17px;line-height:1.45}
.fala u{
  display:block;text-decoration:none;font-family:'Archivo';font-weight:600;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--meta);margin-bottom:8px;
}

/* ---- nota de rodapé do painel ---- */
/* Vive na barra lateral, não a flutuar sobre o conteúdo: um demo assume-se
   sem tapar aquilo que está a demonstrar. */
.rodape-demo{
  margin:auto 30px 18px;padding-top:20px;line-height:1.55;
  font-family:'Archivo';font-weight:600;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--meta);
}
.lado .rodape-demo + .lado__pe{margin-top:0}