/* Prometheus Elétrica — site.css
   O que vale para todas as páginas: respiro das seções, foto, fio vertical, topo, menu e rodapé.
   Tokens e componentes vêm do estilos.css (Identidade Visual v1.2). Cada página tem o seu CSS depois deste. */

:root {
  --t-h2-home: clamp(1.75rem, 1.25rem + 2vw, 2.441rem);
  --t-hero: clamp(2rem, 1.1rem + 3.4vw, 3.25rem);
  --secao-espaco: 160px;   /* respiro em cima e embaixo de cada seção (grade de 8): 320 px entre os conteúdos. Era 120; aumentado em 28/10/2026 */
}
@media (max-width: 900px) { :root { --secao-espaco: 128px; } }
@media (max-width: 640px) { :root { --secao-espaco: 96px; } }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h2 { font-size: var(--t-h2-home); }
/* Seções em faixas: alternam grafite e superfície (um tom acima) para cada seção ficar clara, sobretudo no celular.
   Pedido em 23/10/2026 ("as seções parecem uma só"). A faixa conta pela ordem das seções: mover uma seção no editor reorganiza sozinho. */
.secao { padding-top: var(--secao-espaco); padding-bottom: var(--secao-espaco); }
.fio-vertical > section:nth-of-type(even) { background: var(--cor-superficie); }
main { padding-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
strong { font-weight: var(--peso-medio); color: var(--cor-texto); }

.pular { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--cor-primaria); color: var(--cor-primaria-contraste); padding: 8px 16px; border-radius: var(--raio); }
.pular:focus { left: 16px; }

/* ---------- Foto: enquanto o arquivo não existe, a logo ocupa o lugar ---------- */
.foto { background: var(--cor-superficie); }
.foto img { position: absolute; inset: 0; }
.foto--vaga {
  border: 1px solid var(--cor-borda);
  background:
    url("../img/logo/prometheus-simbolo-laranja.svg") center / auto 26% no-repeat,
    radial-gradient(120% 90% at 70% 15%, rgba(255, 106, 19, .14), transparent 60%),
    var(--cor-superficie);
}

/* ---------- Fio vertical e margens ----------
   O fio sai do ponto do topo (data-fio-inicio) e termina no centro de Maceió, no mapa (data-fio-fim).
   Computador: 32 px a mais à esquerda para o fio passar (grade de 8).
   Celular: o fio fica fino na margem (8 px a mais à esquerda), sem passar por cima do texto. Em cada título
   de seção ganha um traço laranja curto acima. Pedido em 23/10/2026 (antes o fio sumia no celular). */
.fio-vertical .container { padding-left: calc(var(--margem-lateral) + 32px); }
@media (max-width: 640px) {
  .fio-vertical .container { padding-left: calc(var(--margem-lateral) + 8px); }
  .fio-vertical__svg path { stroke-width: calc(var(--fio-espessura) * .75); }
}

/* ---------- S1. Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(20, 18, 16, .94);
  border-bottom: 1px solid var(--cor-borda);
}
@supports (backdrop-filter: blur(8px)) { .topo { background: rgba(20, 18, 16, .9); backdrop-filter: blur(10px); } }
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: 72px; }
.topo__logo { display: block; flex: none; }
.topo__logo img { height: 40px; width: auto; }
@media (max-width: 360px) {     /* celular estreito: logo menor para o botão Menu não passar da margem */
  .topo__barra { gap: var(--esp-2); }
  .topo__logo img { height: 34px; }
}
.topo__logo:hover { opacity: 1; }
.menu { display: flex; align-items: center; gap: var(--esp-4); }
.menu a:not(.botao) {
  color: var(--cor-texto-suave); text-decoration: none; font-weight: var(--peso-medio);
  padding: 8px 0;
}
.menu a:not(.botao):hover, .menu a[aria-current="page"] { color: var(--cor-texto); opacity: 1; }
.menu__urgencia { min-height: 48px; }
.topo__abrir {
  display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 var(--esp-2);
  font: inherit; font-weight: var(--peso-medio); color: var(--cor-texto);
  background: transparent; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); cursor: pointer;
}
.topo__abrir-linhas, .topo__abrir-linhas::before { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.topo__abrir-linhas::before { content: ""; position: absolute; top: 8px; }
.topo__abrir-linhas { transform: translateY(-4px); }

/* Menu com 7 itens + Urgência: abaixo de 1120 px ele vira o botão Menu */
@media (max-width: 1120px) {
  .topo__abrir { display: inline-flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--esp-1) var(--margem-lateral) var(--esp-3);
    background: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda);
  }
  .menu.aberto { display: flex; }
  .menu a:not(.botao) { padding: 16px 0; border-bottom: 1px solid var(--cor-borda); font-size: var(--t-lg); }
  .menu .menu__urgencia { margin-top: var(--esp-3); }
}

/* ---------- Vagas (conteúdo que ainda não existe) ---------- */
.vaga {
  display: grid; place-items: center; min-height: 88px; padding: var(--esp-2);
  border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio);
  color: var(--cor-texto-suave); font-size: var(--t-sm); text-align: center;
}

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Rodapé (bloco compartilhado) ----------
   Quatro blocos (marca · navegação · contato · legais) e a linha final.
   Celular: uma coluna. Tablet: marca em cima e três colunas. Computador: 4 · 2 · 3 · 2. */
.rodape { border-top: 1px solid var(--cor-borda); background: #100E0D; padding: var(--esp-8) 0 var(--esp-3); }
.rodape ul { display: grid; gap: 8px; }
.rodape__grade { display: grid; gap: var(--esp-4); }
.rodape .container { padding-left: calc(var(--margem-lateral) + 32px); }   /* mesma margem do fio, que desce pelo rodapé */
.rodape__assinatura { display: flex; justify-content: flex-end; margin-top: var(--esp-6); }   /* logo embaixo, à direita: o fio passa por baixo dela */
.rodape__assinatura img { height: 40px; width: auto; }
.rodape__marca p { max-width: 40ch; color: var(--cor-texto-suave); }
.rodape__titulo {
  margin: 0 0 var(--esp-2); color: var(--cor-texto); font-size: var(--t-sm); font-weight: var(--peso-medio);
  letter-spacing: var(--espaco-letra-rotulo); text-transform: uppercase;
}
.rodape a { color: var(--cor-texto-suave); text-decoration: none; }
.rodape a:hover { color: var(--cor-texto); opacity: 1; }
.rodape__contato li { min-width: 0; overflow-wrap: anywhere; color: var(--cor-texto-suave); }   /* e-mail longo não estoura no celular */
.rodape__base { margin-top: var(--esp-6); }
.rodape__base p { margin: 0 auto; max-width: none; padding-top: var(--esp-3); border-top: 1px solid rgba(255, 255, 255, .08); color: var(--cor-texto-suave); font-size: var(--t-sm); text-align: center; }
@media (max-width: 640px) { .rodape .container { padding-left: calc(var(--margem-lateral) + 8px); } }
@media (min-width: 768px) { .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rodape__marca { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .rodape__grade { grid-template-columns: 4fr 2fr 3fr 2fr; } .rodape__marca { grid-column: auto; } }

/* Botão fixo do WhatsApp: aparece depois que a pessoa passa do topo (js/site.js) */
.whatsapp-fixo {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; box-shadow: var(--sombra);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity var(--duracao-media) var(--curva-padrao), transform var(--duracao-media) var(--curva-padrao);
}
.whatsapp-fixo.visivel { opacity: 1; transform: none; pointer-events: auto; }

/* Bloco escondido (ex.: depoimentos até chegarem os reais) */
[hidden] { display: none !important; }