/* Prometheus Elétrica — estilos.css | Identidade Visual v1
   Página de estilos única: tokens da marca, base, componentes e animações.
   Tema padrão = ESCURO (Rota B, cara da marca: site, redes, anúncios).
   Tema CLARO = documentos (Rota A: relatório, OS, orçamento) → use data-tema="claro" no <html> ou em qualquer bloco.
   Fontes (Google Fonts, licença OFL):
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Saira:wdth,wght@100..125,400..800&display=swap" rel="stylesheet">
*/

:root {
  /* ---------- Cores (papéis) ---------- */
  --cor-primaria: #FF6A13;            /* laranja-brasa: botões, links, símbolo */
  --cor-primaria-contraste: #141210;  /* texto sobre a primária (6,5:1) */
  --cor-primaria-texto: #FF6A13;      /* primária usada como texto (6,5:1 no fundo escuro) */
  --cor-apoio: #A69E95;               /* cinza quente */
  --cor-destaque: #FFB547;            /* âmbar: ativo distintivo, uso raro (brilho do fio-guia) */
  --cor-fundo: #141210;
  --cor-superficie: #1F1C19;
  --cor-texto: #F2EEE8;
  --cor-texto-suave: #A69E95;
  --cor-borda: #3A3530;               /* divisórias decorativas */
  --cor-borda-forte: #7A726A;         /* campos de formulário (≥ 3:1) */
  --cor-sucesso: #6FCF97;
  --cor-alerta: #F2C94C;
  --cor-erro: #FF6B6B;

  /* ---------- Tipografia ---------- */
  --fonte-titulo: 'Barlow', 'Arial', sans-serif;  /* títulos e botões: Barlow 600 (trocada em 27/10/2026: a Saira Expandida pesava em frases longas) */
  --fonte-rotulo: 'Saira', 'Arial', sans-serif;  /* rótulos em caixa alta: Saira Expandida, a mesma do logo */
  --fonte-texto: 'Saira', 'Arial', sans-serif;
  --largura-titulo: 100%;
  --largura-rotulo: 125%;             /* Saira Expandida, a mesma do logo */
  --largura-texto: 100%;
  --t-sm: .8rem;                      /* escala com razão 1,25 */
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-h3: 1.563rem;
  --t-h2: clamp(1.563rem, 1.2rem + 1.6vw, 1.953rem);
  --t-h1: clamp(1.953rem, 1.4rem + 2.6vw, 2.441rem);
  --t-display: clamp(2.441rem, 1.6rem + 4vw, 3.815rem);
  --peso-regular: 400;
  --peso-medio: 600;
  --peso-titulo: 600;                 /* h1, h2, h3 */
  --peso-forte: 700;                  /* números grandes e nomes em destaque */
  --altura-linha: 1.6;
  --altura-linha-titulo: 1.1;
  --espaco-letra-rotulo: .16em;       /* rótulos em caixa alta, como o "ELÉTRICA" */

  /* ---------- Espaço (base 8px) ---------- */
  --esp-1: .5rem; --esp-2: 1rem; --esp-3: 1.5rem; --esp-4: 2rem; --esp-6: 3rem; --esp-8: 4rem; --esp-12: 6rem;
  --largura-max: 1200px;
  --largura-texto-max: 68ch;
  --margem-lateral: 16px;

  /* ---------- Forma ---------- */
  --raio: 4px;                        /* cantos quase vivos, como o símbolo */
  --linha: 2px;                       /* fio-guia, ícones e divisórias fortes */
  --sombra: 0 8px 24px rgba(0, 0, 0, .35);
  --brilho: 0 0 12px rgba(255, 106, 19, .55);  /* só no fio-guia e no ponto que ele aponta */

  /* ---------- Movimento ---------- */
  --duracao-rapida: 150ms;            /* hover, foco */
  --duracao-media: 300ms;             /* linha correndo sob links e cartões */
  --duracao-lenta: 1200ms;            /* fio-guia desenhando */
  --duracao-corrente: 7000ms;         /* ciclo da faísca: passa em ~1/3 do tempo e descansa o resto */
  --curva-padrao: cubic-bezier(.2, .7, .2, 1);  /* decidida, sem quique: séria */
}

/* fio:inicio — ajustes do fio (fio-guia e fio vertical). A aba Fio do editor reescreve este bloco. */
:root {
  --fio-cor: var(--cor-primaria);         /* cor do fio */
  --fio-ponto-cor: var(--cor-destaque);   /* cor dos pontos que acendem */
  --fio-faisca-cor: #FFE7C2;              /* faísca "branca-quente" */
  --fio-espessura: 2px;
  --fio-brilho: 12px;                     /* brilho em volta do fio */
  --raio-fio: 12px;                       /* curvas (no celular, 2/3 disso) */
  --fio-faisca: 110;                      /* comprimento da faísca, em px */
  --fio-passagem: 4.4;                    /* segundos que a faísca leva para percorrer o fio vertical */
  --fio-intervalo: 5.4;                   /* segundos de descanso entre uma passagem e outra */
}
/* fio:fim */

/* Tema claro: documentos (relatório, OS, orçamento) */
[data-tema="claro"] {
  --cor-primaria-texto: #C2410C;      /* laranja escuro para texto (4,9:1) */
  --cor-fundo: #FAF7F2;
  --cor-superficie: #FFFFFF;
  --cor-texto: #1F1D1B;
  --cor-texto-suave: #6B6560;
  --cor-borda: #D8D1C7;
  --cor-borda-forte: #8C857D;
  --cor-sucesso: #1E7B4A;
  --cor-alerta: #8A5A00;
  --cor-erro: #B42318;
  --sombra: 0 6px 18px rgba(31, 29, 27, .08);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duracao-rapida: 0ms; --duracao-media: 0ms; --duracao-lenta: 0ms; }
}

/* =========================== Base =========================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-stretch: var(--largura-texto);
  font-size: var(--t-base);
  font-weight: var(--peso-regular);
  line-height: var(--altura-linha);
}
[data-tema] { background: var(--cor-fundo); color: var(--cor-texto); }
h1, h2, h3, .titulo {
  font-family: var(--fonte-titulo);
  font-stretch: var(--largura-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--altura-linha-titulo);
  letter-spacing: -.01em;
  margin: 0 0 var(--esp-2);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
.display { font-size: var(--t-display); }
p { margin: 0 0 var(--esp-2); max-width: var(--largura-texto-max); }
small, .texto-pequeno { font-size: var(--t-sm); }
.texto-suave { color: var(--cor-texto-suave); }
a { color: var(--cor-primaria-texto); text-underline-offset: 3px; transition: opacity var(--duracao-rapida) var(--curva-padrao); }
a:hover { opacity: .8; }
:focus-visible { outline: var(--linha) solid var(--cor-destaque); outline-offset: 3px; }
img, svg { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--cor-borda); margin: var(--esp-4) 0; }

.container { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--margem-lateral); }
.secao { padding-top: var(--esp-8); padding-bottom: var(--esp-8); }
.grade { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* Rótulo: caixa alta espaçada, eco do "ELÉTRICA" do logo */
.rotulo {
  font-family: var(--fonte-rotulo);
  font-stretch: var(--largura-rotulo);
  font-weight: var(--peso-medio);
  font-size: var(--t-sm);
  letter-spacing: var(--espaco-letra-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

/* ======================== Componentes ======================== */

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-1);
  min-height: 48px; padding: 0 var(--esp-3);
  font-family: var(--fonte-titulo); font-stretch: var(--largura-titulo); font-weight: var(--peso-medio);
  font-size: var(--t-base); letter-spacing: .02em; text-decoration: none;
  border: var(--linha) solid transparent; border-radius: var(--raio); cursor: pointer;
  transition: background var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao), border-color var(--duracao-rapida) var(--curva-padrao);
}
.botao--primario { background: var(--cor-primaria); color: var(--cor-primaria-contraste); }
.botao--primario:hover { background: var(--cor-destaque); }
.botao--secundario { background: transparent; color: var(--cor-texto); border-color: var(--cor-borda-forte); }
.botao--secundario:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-texto); }

/* Cartão */
.cartao {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: var(--esp-3); box-shadow: var(--sombra);
}

/* Etiqueta (status) */
.etiqueta {
  display: inline-block; padding: 2px var(--esp-1); border-radius: var(--raio);
  font-size: var(--t-sm); font-weight: var(--peso-medio); border: 1px solid currentColor;
}
.etiqueta--feito { color: var(--cor-sucesso); }
.etiqueta--falta { color: var(--cor-alerta); }
.etiqueta--risco { color: var(--cor-erro); }

/* Bloco de urgência: sóbrio, sem selo "24h" nem telefone gigante */
.urgencia {
  background: var(--cor-superficie); border: var(--linha) solid var(--cor-primaria); border-radius: var(--raio);
  padding: var(--esp-3); display: grid; gap: var(--esp-2);
}
.urgencia ol { margin: 0; padding-left: 1.2em; color: var(--cor-texto-suave); }
.urgencia ol li:first-child { color: var(--cor-texto); font-weight: var(--peso-medio); }

/* Tabela (relatório / OS) */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.tabela th { text-align: left; font-weight: var(--peso-medio); color: var(--cor-texto-suave); font-size: var(--t-sm); letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase; padding: var(--esp-1) 0; border-bottom: var(--linha) solid var(--cor-borda); }
.tabela td { padding: var(--esp-1) var(--esp-1) var(--esp-1) 0; border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
.tabela td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }

/* Campo de formulário */
.campo { display: grid; gap: 6px; }
.campo label { font-size: var(--t-sm); font-weight: var(--peso-medio); }
.campo input, .campo select, .campo textarea {
  min-height: 48px; padding: 0 var(--esp-2); font: inherit; color: var(--cor-texto);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio);
  transition: border-color var(--duracao-rapida) var(--curva-padrao);
}
.campo textarea { padding: var(--esp-1) var(--esp-2); min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--cor-primaria); outline: none; box-shadow: var(--brilho); }

/* Fio-guia: ativo distintivo. Linha fina contínua, ângulos retos com curva suave, termina no ponto importante.
   Uso: <svg class="fio-guia" data-anima="fio"><path d="..."/><circle class="fio-guia__ponto" .../></svg> */
.fio-guia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fio-guia path { fill: none; stroke: var(--fio-cor); stroke-width: var(--fio-espessura); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 var(--fio-brilho) color-mix(in srgb, var(--fio-cor) 55%, transparent)); }
.fio-guia__ponto { fill: var(--fio-ponto-cor); filter: drop-shadow(0 0 6px var(--fio-cor)); }
[data-tema="claro"] .fio-guia path { filter: none; }
@media (max-width: 640px) { .fio-guia--some-no-celular { display: none; } }  /* em tela estreita o fio passaria por cima do texto */

/* Ícone: pacote em Idenidade visual/icones (grade 24, traço 2 px, cantos vivos). Cor = cor do texto. */
.icone { width: 24px; height: 24px; flex: none; vertical-align: middle; }
.icone--grande { width: 48px; height: 48px; }
.icone--ativo { color: var(--cor-primaria-texto); }

/* Foto: luz quente, fundo escuro, pessoas reais. Véu para garantir leitura do texto por cima. */
.foto { position: relative; overflow: hidden; border-radius: var(--raio); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--veu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 18, 16, .85), rgba(20, 18, 16, .2)); }

/* ===================== Animações (acionadas pelo animacoes.js) =====================
   Regra: um único momento orquestrado (o fio-guia) + movimento que responde à pessoa. Nada de "aparecer" em cada bloco. */

/* 1. fio — o fio-guia se desenha até o ponto importante (stroke-dashoffset definido pelo JS) */
[data-anima="fio"] path { transition: stroke-dashoffset var(--duracao-lenta) var(--curva-padrao); }


/* 1b. fio vertical — liga as seções (o JS desenha conforme a rolagem) */
.fio-vertical { position: relative; }
.fio-vertical .container { padding-left: calc(var(--margem-lateral) + 28px); }  /* espaço para o fio na lateral */
.fio-vertical__svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 2; }  /* acima das seções (mesmo as de fundo claro), sempre na margem lateral */
.fio-vertical__svg path { fill: none; stroke: var(--fio-cor); stroke-width: var(--fio-espessura); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 var(--fio-brilho) color-mix(in srgb, var(--fio-cor) 55%, transparent)); }
.fio-vertical__ramo { transition: stroke-dashoffset var(--duracao-media) var(--curva-padrao); }
.fio-vertical__ponto { fill: var(--fio-ponto-cor); opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px var(--fio-cor)); }
.fio-vertical__ponto.aceso { animation: acende 900ms var(--curva-padrao) forwards; }

/* 2. acende — o ponto final do fio brilha uma vez (o novo fogo) */
[data-anima="fio"] .fio-guia__ponto { opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-anima="fio"].aceso .fio-guia__ponto { animation: acende 900ms var(--curva-padrao) forwards; }
@keyframes acende {
  0% { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}

/* 3. corrente — uma faísca curta percorre o fio-guia de tempos em tempos (único loop: é o ativo distintivo).
   O JS cria o caminho .fio-guia__corrente sobre o fio e controla o ritmo; ela pausa fora da tela. */
.fio-guia .fio-guia__corrente, .fio-vertical__svg .fio-guia__corrente { fill: none; stroke: var(--fio-faisca-cor); stroke-width: calc(var(--fio-espessura) + 1px); stroke-linecap: round; filter: drop-shadow(0 0 6px var(--fio-ponto-cor)) drop-shadow(0 0 10px var(--fio-cor)); }  /* faísca "branca-quente" */

/* 4. linha — ao passar o mouse ou focar, uma linha laranja corre por baixo, da esquerda para a direita.
   Uso: data-anima="linha" em links, botão secundário, cartão clicável, item de menu. */
[data-anima="linha"] { position: relative; }
[data-anima="linha"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--linha);
  background: var(--cor-primaria); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duracao-media) var(--curva-padrao);
}
[data-anima="linha"]:hover::after, [data-anima="linha"]:focus-visible::after { transform: scaleX(1); }

/* 5. contador — números de prova sobem até o valor (tabular para não pular) */
[data-anima="contador"] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  [data-anima="fio"] .fio-guia__ponto, .fio-vertical__ponto { opacity: 1; animation: none; }
  .fio-guia .fio-guia__corrente, .fio-vertical__svg .fio-guia__corrente { display: none; }
  [data-anima="linha"]::after { transition: none; }
}