/* ==========================================================================
   HORUS CONTROL — PLANTÃO · 18:00 às 18:00
   --------------------------------------------------------------------------
   A página é um plantão inteiro. Começa às 18:00, atravessa a madrugada com o
   dono dormindo e termina às 18:00 do dia seguinte. O produto não é
   apresentado: ele é a única coisa acordada durante a noite.

   TRÊS LEIS que sustentam a direção (quebrar qualquer uma desmonta o resto):
   1. Um único número governa a página — a HORA. Fundo, cabeçalho e console
      derivam dela. Console e carimbo nunca divergem: os dois leem a mesma
      variável, e quem move a hora é a rolagem.
   2. Nenhum número entra aqui sem ter sido lido no código. Cada um carrega o
      arquivo de origem em comentário, no HTML.
   3. Racionamento de cor: SÓDIO só em problema, PROVA só no dia, MERCÚRIO só
      em sistema funcionando. `box-shadow` é proibido no arquivo inteiro —
      profundidade vem de valor e de costura de 1px. Durante a noite, o
      console é a ÚNICA superfície com luz interna.
   ========================================================================== */

:root {
  /* --- noite --------------------------------------------------------- */
  --breu:      #14100D;   /* asfalto: preto QUENTE, nunca navy               */
  --guarita:   #201A15;   /* superfície do console — e de nada mais          */
  --costura:   #322A22;   /* fio de 1px que substitui toda sombra            */
  --sodio:     #E8862F;   /* poste de luz = PROBLEMA, e só problema          */
  --mercurio:  #A8C6D6;   /* lâmpada de garagem = SISTEMA FUNCIONANDO        */
  --luz:       #EDE6DC;
  --luz-2:     #9B8E80;

  /* --- dia ----------------------------------------------------------- */
  --mesa:      #DDE3E6;
  --folha:     #FFFFFF;
  --tinta:     #14100D;
  --frio-2:    #5A666E;
  --prova:     #14624E;   /* fechado COM PROVA — só no dia e no hash         */

  --marca:     #2E8FD0;   /* azul do logotipo: só no logotipo                */

  --display: 'Chivo', system-ui, sans-serif;
  --corpo:   'Asap', system-ui, sans-serif;
  --maquina: 'Azeret Mono', ui-monospace, monospace;

  --gutter: clamp(18px, 4.6vw, 68px);
  --max: 1240px;
  --barra: 34px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--breu);
  color: var(--luz);
  font-family: var(--corpo);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--mercurio); outline-offset: 3px; }

/* O fundo é pintado por uma camada fixa cuja cor a hora comanda.
   Fica atrás de tudo e não repinta layout — só a cor muda. */
#ceu {
  position: fixed; inset: 0; z-index: -1;
  background: var(--breu);
  transition: background-color .28s linear;
}

.faixa { padding-inline: var(--gutter); }
.interno { max-width: var(--max); margin-inline: auto; }

/* ---------------------------------------------------------------- máquina */
.mono, .selo, .ficha, .carimbo, .fita, .disparos, .arq {
  font-family: var(--maquina);
  font-variant-numeric: tabular-nums;
}

.selo {
  display: inline-flex; align-items: baseline; gap: .55em;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--costura); color: var(--luz-2);
  padding: 5px 10px; border-radius: 2px;
  white-space: nowrap;
}
.selo b { font-weight: 500; color: var(--luz); letter-spacing: .06em; }
.selo.problema { border-color: #5A3A17; color: var(--sodio); }
.selo.problema b { color: var(--sodio); }
.selo.sistema { border-color: #2C3D45; color: var(--mercurio); }
.selo.sistema b { color: var(--mercurio); }

/* --------------------------------------------------- barra fixa de plantão */
.plantao {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--barra);
  display: flex; align-items: center; gap: 14px;
  padding-inline: var(--gutter);
  background: rgba(20,16,13,.86);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--costura);
  font-family: var(--maquina);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.plantao .nome { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--luz); text-decoration: none; white-space: nowrap; }
.plantao .nome img { width: 20px; height: 20px; }
.plantao .quem {
  color: var(--luz-2); flex: 1; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plantao .entrar { color: var(--luz); text-decoration: none; border-bottom: 1px solid var(--costura); padding-bottom: 2px; }
.plantao .entrar:hover { color: var(--mercurio); border-color: var(--mercurio); }

/* ---------------------------------------------------------- carimbo de hora
   Como um DVR de CFTV grava a hora dentro da imagem. É a fonte única do
   estado da página, e por isso fica sempre visível. */
.carimbo {
  position: fixed; z-index: 39;
  top: calc(var(--barra) + 12px); left: var(--gutter);
  font-size: 12px; letter-spacing: .18em;
  color: var(--luz); opacity: .6;
  pointer-events: none;
}

/* ============================================================ PALCO DA NOITE
   Duas colunas no desktop: o argumento rola à esquerda, o console fica
   parado à direita, os dois no mesmo relógio. */
.palco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  grid-template-areas: "abertura abertura" "texto console";
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
  padding-top: calc(var(--barra) + 40px);
}
.abertura { grid-area: abertura; min-width: 0; }
.coluna-texto { grid-area: texto; min-width: 0; }
.coluna-console { grid-area: console; position: sticky; top: calc(var(--barra) + 46px); min-width: 0; }

.hora {
  min-height: 88vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(40px, 7vh, 90px);
  max-width: 64ch;
}
.hora > * { margin: 0; }
.hora > * + * { margin-top: 18px; }

.etiqueta {
  font-family: var(--maquina);
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--luz-2);
}
.etiqueta b { color: var(--luz); font-weight: 500; }

h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(38px, 8.5vw, 118px); line-height: .90; letter-spacing: -.03em;
  text-wrap: balance;
}
h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance;
}
.lead { font-size: clamp(19px, 2.1vw, 21px); line-height: 1.5; color: var(--luz); }
p { color: var(--luz); }
.hora p { color: #CFC5B8; }
.hora p b, .lead b { color: var(--luz); font-weight: 500; }

.selos { display: flex; flex-wrap: wrap; gap: 8px; }

/* ================================================================= CONSOLE
   A única superfície com luz interna durante a noite. SVG e DOM puros:
   sem biblioteca, sem canvas, sem imagem — o quadro precisa ser exato na
   hora certa, não suave. */
.console {
  background: var(--guarita);
  border: 1px solid var(--costura);
  border-top-color: #4A3E33;      /* clareamento de 1px: instrumento embutido */
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--maquina);
}
.console-topo {
  display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--costura);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--luz-2);
}
.console-topo .estado { color: var(--mercurio); }
.console-topo .estado.caiu { color: var(--sodio); }

.console-corpo { display: grid; grid-template-columns: 132px minmax(0,1fr); }
.postos { border-right: 1px solid var(--costura); padding: 8px 0; }
.posto {
  padding: 7px 12px; border-left: 2px solid transparent;
  font-size: 11px; line-height: 1.35;
}
.posto .p-nome { color: var(--luz); letter-spacing: .04em; }
.posto .p-estado { color: var(--luz-2); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.posto.ativo { border-left-color: var(--mercurio); }
.posto.ativo .p-estado { color: var(--mercurio); }
.posto.descoberto { border-left-color: var(--sodio); }
.posto.descoberto .p-nome, .posto.descoberto .p-estado { color: var(--sodio); }

.mapa { display: block; width: 100%; height: auto; background: #1A1511; }

/* column-reverse: a linha mais NOVA fica embaixo e sempre inteira; o corte
   acontece em cima, nas linhas velhas — que é como um log se comporta.
   Antes o corte comia justamente a linha que acabou de chegar. */
.fita {
  border-top: 1px solid var(--costura);
  height: 168px; overflow: hidden;
  display: flex; flex-direction: column-reverse;
  padding: 8px 12px; font-size: 11px; line-height: 1.5;
}
.fita-linha { display: grid; grid-template-columns: 46px 54px 1fr; gap: 10px; padding: 2px 0; color: var(--luz-2); }
.fita-linha .fl-hora { color: var(--luz); }
.fita-linha .fl-nsr { color: #8E8176; letter-spacing: .04em; }
.fita-linha.sistema .fl-txt { color: var(--mercurio); }
.fita-linha.problema .fl-txt { color: var(--sodio); }
.fita-linha.fila .fl-nsr { color: var(--sodio); }
.fita-linha.provado .fl-nsr { color: #4E9E85; }

/* barra de arrasto: é o mesmo controle que a rolagem */
.regua { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--costura); }
.regua input[type=range] { flex: 1; accent-color: var(--mercurio); background: transparent; min-height: 44px; }
.regua input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
.regua input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
.plantao .entrar { display: inline-flex; align-items: center; min-height: 44px; }
.regua .r-hora { font-size: 11px; color: var(--luz); letter-spacing: .1em; min-width: 46px; }
.regua .r-ir {
  font-family: var(--maquina); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: none; border: 1px solid var(--costura); color: var(--sodio);
  padding: 5px 9px; border-radius: 2px; cursor: pointer;
}
.regua .r-ir:hover { border-color: var(--sodio); }
.console-nota { padding: 7px 12px 10px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8E8176; border-top: 1px solid var(--costura); }

/* ==================================================================== DIA */
.dia { background: var(--mesa); color: var(--tinta); position: relative; }
.dia h2, .dia h1 { color: var(--tinta); }
.dia p { color: #33393E; }
.dia .etiqueta { color: var(--frio-2); }
.dia .etiqueta b { color: var(--tinta); }
.dia .selo { border-color: #BCC6CC; color: var(--frio-2); }
.dia .selo b { color: var(--tinta); }
.dia .selo.prova { border-color: #9DBDB1; color: var(--prova); }
.dia .selo.prova b { color: var(--prova); }
.dia .selo.problema { border-color: #D8B48A; color: #975302; }
.dia .selo.problema b { color: #975302; }

.bloco { padding-block: clamp(52px, 8vh, 104px); }
.bloco > * { margin: 0; }
.bloco > * + * { margin-top: 20px; }
.bloco p { max-width: 64ch; }

/* documentos deitados na mesa: separação por VALOR, nunca por sombra */
.papeis { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); margin-top: 30px; }
.papel { background: var(--folha); border: 1px solid #C6D0D6; padding: 18px 18px 20px; }
.papel h3 { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.005em; margin: 0 0 4px; }
.papel .p-sub { font-family: var(--maquina); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--frio-2); margin: 0 0 12px; }
.papel table { width: 100%; border-collapse: collapse; font-family: var(--maquina); font-size: 11px; font-variant-numeric: tabular-nums; }
.papel td, .papel th { text-align: left; padding: 3px 0; border-bottom: 1px solid #EBEFF1; color: #33393E; font-weight: 400; }
.papel th { color: var(--frio-2); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
.papel .afd { font-size: 10.5px; line-height: 1.7; color: #33393E; white-space: pre; overflow-x: auto; }
.papel .fecha { color: var(--prova); }

/* tabela de disparos: ficha técnica, não folheto. Zero ícone. */
.disparos { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 12.5px; }
.disparos th, .disparos td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid #C6D0D6; vertical-align: top; }
.disparos th { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--frio-2); font-weight: 500; }
.disparos td:first-child { color: var(--tinta); white-space: nowrap; }
.disparos td:nth-child(2) { color: var(--prova); white-space: nowrap; }
.disparos td:last-child { color: #33393E; font-family: var(--corpo); font-size: 15px; }

.rola { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rola:focus-visible { outline: 2px solid var(--prova); outline-offset: 2px; }

/* arquitetura: desenho em linha, sem caixas */
.arq { margin-top: 30px; overflow-x: auto; }
.arq svg { min-width: 720px; }

.par { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 26px; }
.par h3 { font-family: var(--display); font-weight: 800; font-size: 19px; margin: 0 0 8px; line-height: 1.15; }
.par p { margin: 0; font-size: 16px; }
.par .item { border-top: 2px solid var(--tinta); padding-top: 14px; }
.par .item.falta { border-top-color: #A4600F; }

/* ------------------------------------------------------------- fechamento */
/* transparente de propósito: aqui o céu volta EXATAMENTE à cor do primeiro
   quadro (18:00), e o ciclo fecha. */
.fecho { background: transparent; color: var(--luz); text-align: left; }
.fecho .marca-grande { width: min(168px, 40vw); margin: 0 0 26px; }
.tecla {
  display: inline-block; font-family: var(--maquina); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--luz); color: var(--breu); font-weight: 500;
  padding: 16px 34px; border-radius: 2px; text-decoration: none;
}
.tecla:hover { background: #FFF; }
.fecho .contato { font-family: var(--maquina); font-size: 12px; letter-spacing: .1em; color: var(--luz-2); margin-top: 16px; }

.rodape {
  border-top: 1px solid var(--costura); padding-block: 22px 34px;
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  font-family: var(--maquina); font-size: 11px; letter-spacing: .1em; color: var(--luz-2);
}
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--mercurio); }

/* ================================================================== CELULAR
   Especificado para o celular primeiro: é onde o comprador vai olhar.
   O console gruda no ALTO e o argumento passa por baixo dele. */
@media (max-width: 900px) {
  body { font-size: 17px; }
  /* No celular a ordem muda: a abertura das 18:00 vem primeiro (é o argumento),
     o console gruda logo abaixo dela e o resto da noite passa por baixo. Sem
     isto o console cairia no fim de toda a noite, sem serventia nenhuma. */
  /* display:block e não grade: item de grade só gruda dentro da PRÓPRIA linha,
     então o console soltava assim que a linha dele acabava. Em fluxo normal o
     bloco que o contém é o palco inteiro, e ele acompanha a noite toda. */
  .palco { display: block; }
  .coluna-console {
    position: sticky; top: var(--barra); z-index: 20;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* acompanha a cor do céu, senão fica uma tarja mais clara sobre a noite */
    background: var(--ceu-agora, var(--breu));
    padding-block: 8px 10px;
    border-bottom: 1px solid var(--costura);
  }
  /* o carimbo flutuante bateria de frente com o console grudado: no celular
     ele passa a morar DENTRO da moldura (mesma variável, mesmo quadro). */
  .carimbo { display: none; }
  .console-corpo { grid-template-columns: 1fr; }
  .mapa { height: 18vh; max-height: 138px; }
  /* quebra em duas fileiras em vez de rolar para o lado: posto cortado na
     borda parece defeito, e ninguém descobre que dá para arrastar. */
  .postos { display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--costura); padding: 4px 0; }
  .posto { flex: 1 0 46%; border-left: 0; border-bottom: 2px solid transparent; padding: 3px 12px; }
  .selo { white-space: normal; }
  .console-nota { padding: 5px 12px 7px; }
  .regua { padding: 2px 12px; }
  .posto.ativo { border-bottom-color: var(--mercurio); }
  .posto.descoberto { border-bottom-color: var(--sodio); }
  .fita { height: 56px; }
  .hora { min-height: 0; padding-block: 34px; }
  .plantao .quem { display: none; }
}

/* =========================================================== menos movimento
   Sem giro de dígitos, fundo em três degraus e o console já aberto no quadro
   que dói — não numa tela vazia esperando alguém rolar. */
@media (prefers-reduced-motion: reduce) {
  #ceu { transition: none; }
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}