/* =====================================================================
   Base do site Lumentech — reset, tipografia, navegação global, footer
   e botão flutuante de WhatsApp. Usada pelas páginas montadas (home e
   contato). As páginas herdadas do material do Demétrio continuam
   autocontidas — o estilo delas vive dentro de cada arquivo.
   Navegação e footer copiados do esqueleto orglight-hero (o shell mais
   completo do material), sem alteração de desenho.
   ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Unbounded',sans-serif;
  font-weight:400;
  background:var(--black);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}

/* ── NAVEGAÇÃO GLOBAL ─────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  padding:24px 48px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s, border .3s;
}
.nav.sobre-claro{
  background:rgba(242,237,227,.85);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav.sobre-claro .nav-brand,
.nav.sobre-claro .nav-links a{color:var(--ink)}
.nav.sobre-claro .nav-cta{color:var(--ink);border-color:var(--ink)}

.nav-brand{
  font-size:12px;letter-spacing:.14em;font-weight:500;
  color:var(--white);text-decoration:none;
  display:flex;align-items:center;gap:12px;
}
.nav-brand sup{font-size:7px;vertical-align:super}
.nav-brand-divider{
  display:inline-block;width:24px;height:1px;
  background:currentColor;opacity:.4;
}
.nav-brand-line{font-size:10px;letter-spacing:.22em;font-weight:500}
.nav-links{display:flex;gap:40px;list-style:none}
.nav-links a{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);text-decoration:none;font-weight:400;
}
.nav-links a:hover{opacity:.6}
.nav-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);text-decoration:none;font-weight:500;
  border:1px solid var(--white);
  transition:all .25s;
}
.nav-cta:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.nav-links a.nav-atual{pointer-events:none;opacity:.4}

/* ── MENU DO CELULAR (13/08/2026, achado do critique) — abaixo de 900px os
   links da barra 1 sumiam SEM substituto: o site ficava sem navegação
   principal no telefone. Botão "Menu" abre um painel com os mesmos links. */
.nav-menu-btn{
  display:none;
  font-family:inherit;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);background:none;border:1px solid rgba(255,255,255,.35);
  padding:10px 14px;cursor:pointer;
}
.nav.sobre-claro .nav-menu-btn{color:var(--ink);border-color:rgba(0,0,0,.35)}
.nav-painel{
  display:none;
  position:absolute;top:100%;left:0;right:0; /* filho da .nav: alinha com a altura real dela em qualquer tela */
  flex-direction:column;
  /* fundo SÓLIDO de propósito: com transparência, o navegador compõe errado
     o filho de um elemento com backdrop-filter (o desfoque da .nav) e o
     conteúdo de trás vaza pelo painel — visto no Chrome em 13/08/2026 */
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:8px 24px 24px;
}
.nav-painel a{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);text-decoration:none;font-weight:400;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-painel a:last-child{border-bottom:none}
.nav-painel a.nav-atual{pointer-events:none;opacity:.4}
.nav.sobre-claro .nav-painel{background:var(--paper);border-bottom:1px solid rgba(0,0,0,.12)}
.nav.sobre-claro .nav-painel a{color:var(--ink);border-bottom-color:rgba(0,0,0,.08)}
.nav-painel.aberto{display:flex}
@media (max-width:900px){
  .nav{padding:16px 24px}
  .nav-links{display:none}
  .nav-menu-btn{display:inline-block}
  .nav-cta{display:none} /* o CTA vive dentro do painel no celular */
}

/* ── BARRA 2 — menu de seção da própria página (só nas 3 páginas de
   produto: OrgLight, INK, Sistema LED). 3ª versão (13/08/2026), a que
   ficou: `position:sticky`, no fluxo do documento, logo DEPOIS do herói.
   Aparece naturalmente quando a rolagem chega nela e gruda embaixo da
   barra 1 dali em diante — padrão real da Apple em página de produto.
   Sem script de revelação, sem translate, sem depender de altura exata:
   as 2 versões anteriores (fixas) quebraram justamente nesses 3 pontos
   (sobreposição de 19px por altura chutada; gatilho de rolagem fundo
   demais + texto fantasma vazando pela barra 1 translúcida).
   Peso visual menor que a barra 1 de propósito: fonte mínima, opacidade
   baixa, nenhum botão cheio. `.sobre-claro` espelha a inversão da barra 1
   (o script de cada página que já faz isso na nav ganha 1 linha pra fazer
   junto aqui). Ação única (o "Baixar PDF" da política) usa `.subnav.fixo`,
   que continua fixa no topo — não depende de rolagem pra existir. ───── */
.subnav{
  position:sticky;top:var(--nav-h);z-index:49;
  height:var(--subnav-h);
  display:flex;align-items:center;justify-content:center;gap:28px;
  padding:0 48px;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.subnav a{
  /* --fs-3 (11px): piso de leitura confortável apontado pelo critique —
     este componente é nosso, não do Demétrio, então pode subir */
  font-size:var(--fs-3);letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);text-decoration:none;opacity:.55;white-space:nowrap;
  transition:opacity .2s;
}
.subnav a:hover{opacity:1}
.subnav-cta{opacity:.85!important;font-weight:500}
.subnav.claro,.subnav.sobre-claro{
  background:rgba(242,237,227,.94);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.subnav.claro a,.subnav.sobre-claro a{color:var(--ink)}
.subnav.fixo{position:fixed;top:var(--nav-h);left:0;right:0}
@media (max-width:900px){
  /* celular: barra 2 vira lista rolável na horizontal (padrão de mercado),
     em vez de sumir sem substituto */
  .subnav{justify-content:flex-start;overflow-x:auto;padding:0 24px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .subnav::-webkit-scrollbar{display:none}
}

/* alvo de âncora não pode parar escondido atrás da barra dupla (orglight,
   ink, sistema — as 3 páginas com barra 2) */
section[id]{scroll-margin-top:calc(var(--nav-h) + var(--subnav-h) + 16px)}

/* ── FORMULÁRIO: erro e agrupamento (13/08/2026, achados do critique) ──
   Antes, campo obrigatório vazio disparava a bolha padrão do navegador
   (fonte do sistema, canto redondo — fora do visual do site). Agora o
   aviso é nosso: ver validação em rastreio.js. Vermelho é cor FUNCIONAL
   de erro (convenção universal), não entra na paleta da marca. */
.campo-invalido{border-color:#b3261e!important}
.campo-aviso{
  font-family:'Unbounded',sans-serif;
  font-size:var(--fs-3);font-weight:400;letter-spacing:.04em;
  color:#b3261e;margin-top:6px;
}
.form-grupo{
  grid-column:1 / -1; /* atravessa o grid de 2 colunas do formulário */
  font-family:'Unbounded',sans-serif;
  font-size:var(--fs-2);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  opacity:.6;
  margin:32px 0 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
}
.form-grupo:first-of-type{margin-top:0;padding-top:0;border-top:none}

/* ── ABERTURA DA HOME ─────────────────────────────────────────────── */
.abertura{
  min-height:100vh;
  padding:180px 48px 80px;
  background:var(--black);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.abertura-eyebrow{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray);font-weight:400;
  display:flex;align-items:center;gap:14px;
  margin-bottom:40px;
}
.abertura-eyebrow::before{content:"";width:32px;height:1px;background:var(--gray)}
.abertura-eyebrow strong{color:var(--white);font-weight:500}
.abertura-word{
  font-size:clamp(64px, 11vw, 190px);
  font-weight:200;
  line-height:.85;
  letter-spacing:-.05em;
  color:var(--white);
  margin-bottom:48px;
}
.abertura-word .r{font-size:.18em;font-weight:400;vertical-align:super;opacity:.7}
.abertura-linha{
  padding-top:48px;
  border-top:1px solid rgba(255,255,255,.15);
  display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center;
}
.abertura-frase{
  font-size:clamp(18px, 1.7vw, 28px);
  font-weight:200;line-height:1.35;letter-spacing:-.015em;
  color:rgba(255,255,255,.55);
  max-width:820px;
}
.abertura-frase strong{color:var(--white);font-weight:300}
.abertura-cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:18px 32px;
  background:var(--white);color:var(--ink);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;text-decoration:none;white-space:nowrap;
  transition:all .3s;
}
.abertura-cta:hover{box-shadow:0 0 48px rgba(255,255,255,.18);gap:18px}
.abertura-cta svg{width:16px;height:8px}
.abertura-tagline{
  margin-top:24px;
  font-size:12px;letter-spacing:.14em;color:var(--gray);font-weight:300;
}
@media (max-width:900px){
  .abertura{padding:140px 24px 64px}
  .abertura-linha{grid-template-columns:1fr;gap:32px}
}

/* ── FOOTER GLOBAL (desenho do orglight-hero) ─────────────────────── */
.footer{
  background:var(--black);
  border-top:1px solid rgba(255,255,255,.12);
  padding:64px 48px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px;
  align-items:flex-start;
}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-logo{
  font-size:14px;letter-spacing:.14em;font-weight:500;color:var(--white);
}
.footer-logo sup{font-size:8px}
.footer-tagline{font-size:11px;color:var(--gray);font-weight:300;letter-spacing:.04em}
.footer-center,.footer-right{
  font-size:11px;color:var(--gray);font-weight:300;line-height:2;
}
.footer-center strong,.footer-right strong{
  display:block;color:var(--white);font-weight:400;
}
.footer a{color:inherit;text-decoration:none}
.footer a:hover{color:var(--white)}
.footer-right{text-align:right}
.footer-nav{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:24px 40px;
  padding-top:32px;margin-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-nav a{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray);text-decoration:none;
}
.footer-nav a:hover{color:var(--white)}
@media (max-width:900px){
  .footer{grid-template-columns:1fr;padding:48px 24px}
  .footer-right{text-align:left}
}

/* ── TELA DE CARREGAMENTO NO CLIQUE DO CTA (14/08/2026) ─────────────
   Desenho do Demétrio — "opção 2, line draw" de Lumentech_Loading_Screens
   .html ("linha que se desenha como um perfil sendo extrudado"), portado
   igual. Aparece quando a pessoa clica em qualquer CTA de WhatsApp ou
   envia formulário (é o feedback do clique enquanto a conversa abre) e
   some sozinha. Acionamento em rastreio.js. */
.carregando-zap{
  position:fixed;inset:0;z-index:200;
  background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .25s ease;
}
.carregando-zap.ativo{opacity:1;visibility:visible}
.carregando-zap .cz-track{width:200px;height:1px;background:rgba(255,255,255,0.06);position:relative;margin-bottom:28px}
.carregando-zap .cz-fill{position:absolute;top:0;left:0;height:100%;width:0;background:#fff;animation:czLineDraw 2s cubic-bezier(0.4,0,0.2,1) infinite}
@keyframes czLineDraw{
  0%{width:0;left:0}
  45%{width:100%;left:0}
  55%{width:100%;left:0}
  100%{width:0;left:100%}
}
.carregando-zap .cz-brand{font-family:'Unbounded',sans-serif;font-size:13px;font-weight:200;color:#fff;letter-spacing:-0.02em;opacity:0;animation:czBrand 2s ease infinite}
.carregando-zap .cz-sub{font-family:'Unbounded',sans-serif;font-size:9px;font-weight:400;color:rgba(255,255,255,0.3);letter-spacing:0.04em;margin-top:6px;opacity:0;animation:czBrand 2s ease 0.2s infinite}
@keyframes czBrand{
  0%,30%{opacity:0}
  50%,80%{opacity:1}
  100%{opacity:0}
}

/* ── RODAPÉ: fileira de credibilidade (14/08/2026, ordem do Antonio) ──
   Links externos que dão prova social: redes, avaliações, endereço no
   mapa. Só texto, padrão do mapa de links acima. Pinterest, LinkedIn e
   Avaliações entram quando as URLs chegarem. */
.footer-cred{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:14px 32px;
  margin-top:20px;
}
.footer-cred a{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray);text-decoration:none;
  transition:color .15s cubic-bezier(0.23,1,0.32,1);
}
.footer-cred a:hover{color:var(--white)}

/* ── RODAPÉ GLOBAL v2 (14/08/2026) — redesenho após o Antonio rejeitar o
   acúmulo anterior (3 fileiras de links iguais). Zonas: marca grande
   (assinatura tipográfica do site), grade de 3 colunas COM TÍTULO e links
   legíveis (13px, não 10px), fileira social, linha legal. Variante `.claro`
   pras páginas em papel (Sobre, Política). Substitui .footer/.footer-nav/
   .footer-cred — CSS antigo fica morto nas páginas herdadas, sem efeito. */
.rodape{
  background:var(--black);
  border-top:1px solid rgba(255,255,255,.12);
  padding:96px 48px 40px;
  font-family:'Unbounded',sans-serif;
}
.rodape-inner{max-width:1200px;margin:0 auto}
.rodape-logo{font-size:clamp(28px,3vw,40px);font-weight:200;letter-spacing:-.02em;color:var(--white);line-height:1}
.rodape-logo sup{font-size:.32em;vertical-align:super}
.rodape-tagline{font-size:12px;color:var(--gray);letter-spacing:.06em;margin-top:8px}
.rodape-desc{font-size:12px;color:var(--gray);font-weight:300;margin-top:20px;line-height:1.7}
.rodape-grade{
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
  margin-top:64px;padding-top:48px;
  border-top:1px solid rgba(255,255,255,.08);
}
.rodape-titulo{
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray);margin-bottom:16px;
}
.rodape-col{display:flex;flex-direction:column}
.rodape-col a{
  font-size:13px;font-weight:300;color:var(--gray-soft);text-decoration:none;
  padding:7px 0;width:fit-content;
  transition:color .15s cubic-bezier(0.23,1,0.32,1);
}
.rodape-col a:hover{color:var(--white)}
.rodape-social{
  display:flex;flex-wrap:wrap;gap:14px 32px;
  margin-top:56px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}
.rodape-social a{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray);text-decoration:none;padding:6px 0;
  transition:color .15s cubic-bezier(0.23,1,0.32,1);
}
.rodape-social a:hover{color:var(--white)}
.rodape-legal{margin-top:24px;font-size:11px;font-weight:300;color:var(--gray);line-height:1.7}

.rodape.claro{background:var(--paper);border-top:1px solid rgba(0,0,0,.12)}
.rodape.claro .rodape-logo{color:var(--ink)}
.rodape.claro .rodape-grade,.rodape.claro .rodape-social{border-top-color:rgba(0,0,0,.08)}
.rodape.claro .rodape-col a{color:var(--gray-dark)}
.rodape.claro .rodape-col a:hover,.rodape.claro .rodape-social a:hover{color:var(--ink)}

@media (max-width:768px){
  .rodape{padding:64px 24px 32px}
  .rodape-grade{grid-template-columns:1fr;gap:40px;margin-top:48px;padding-top:40px}
  .rodape-col a{padding:11px 0} /* alvo de toque confortável */
}