/* ==========================================================================
   NATURGY · CONNECTA — camada de identidade
   Tokens, tipografia e lockup da marca, transcritos do protótipo v2
   (docs/prototipo/connecta-unificado-v2.html, bloco "Camada de Identidade Visual").
   Fontes servidas localmente — nada de CDN.
   ========================================================================== */

/* ── 1 · Tipografia da marca (mesma ordem de pesos do protótipo) ─────────── */
@font-face{font-family:'FS Emeric';src:url('/fonts/fs-emeric-300.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'FS Emeric';src:url('/fonts/fs-emeric-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'FS Emeric';src:url('/fonts/fs-emeric-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'FS Emeric';src:url('/fonts/fs-emeric-600.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'FS Emeric';src:url('/fonts/fs-emeric-600.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'FS Emeric';src:url('/fonts/fs-emeric-400-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}

/* ── 2 · Tokens Naturgy ──────────────────────────────────────────────────── */
:root{
  /* azul institucional */
  --ng-blue-900:#00243C; --ng-blue-800:#002D4A; --ng-blue-700:#003A5E;
  --ng-blue-600:#004571; --ng-blue-500:#005B93; --ng-blue-400:#087AC3;
  --ng-blue-300:#4A9BD1; --ng-blue-250:#7D9AAA; --ng-blue-200:#BDCEDA;
  --ng-blue-150:#D3DADF; --ng-blue-100:#E5EDF3; --ng-blue-050:#F1F6FA;
  /* laranja de energia */
  --ng-orange-700:#A83700; --ng-orange-600:#C44100; --ng-orange-500:#B65B00;
  --ng-orange-400:#FF9900; --ng-orange-300:#FFBC7D; --ng-orange-200:#FBE5D6;
  --ng-orange-100:#FDEDE2;
  /* semânticas harmonizadas */
  --ng-green-700:#0B5C36; --ng-green-600:#12804C; --ng-green-100:#E7F5EC;
  --ng-amber-700:#8A5A05; --ng-amber-600:#8E5E06; --ng-amber-100:#FDF2DB;
  --ng-red-700:#A32A1E;   --ng-red-600:#C4362A;   --ng-red-100:#FBE9E6;
  --ng-violet-600:#833CA3;--ng-violet-100:#F2E9F6;
  /* superfícies e texto */
  --ng-paper:#FFFFFF; --ng-canvas:#F4F4F2; --ng-canvas-2:#FAFAF8;
  --ng-ink:#152733; --ng-ink-2:#3F5666; --ng-ink-3:#617889; --ng-ink-4:#5B7585;
  --ng-line:#E2E6E6; --ng-line-2:#EFF1F0;
  /* tipografia e forma */
  --ng-font:'FS Emeric','Archivo','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ng-radius:12px;
  --ng-shadow:0 1px 2px rgba(0,45,74,.06),0 4px 14px rgba(0,45,74,.06);
  --ng-shadow-lg:0 10px 34px rgba(0,45,74,.14);
  /* RNF-08 · S15b · A75 · o anel de foco é OPACO. O que havia era `rgba(8,122,195,.32)`:
     três pixels de azul a 32 % que o navegador MISTURA com o que estiver atrás — sobre o
     branco a mistura dá #C5E0F0 e mede 1,6:1, longe dos 3:1 que a RNF-08 pede para um
     indicador de foco. A régua vale para a cor RESULTANTE, não para a cor do token: alfa
     nenhum sobrevive a ela. Este é o `--ng-blue-500` da paleta da casa, sem alfa —
     7,20:1 sobre o branco e 6,54:1 sobre o papel `--ng-canvas`. */
  --ng-focus:0 0 0 3px #005B93;
  /* O MESMO anel não serve às superfícies ESCURAS (topbar, sidebar, hero e trilho da home):
     azul sobre azul-marinho não se vê. Lá o anel é branco puro (12,9:1 sobre a topbar,
     14,6:1 sobre a sidebar), e cada superfície escura reaponta `--ng-focus` para ele — a
     regra do anel é uma só em todo o produto; o que muda é o valor herdado. */
  --ng-focus-escuro:0 0 0 3px #FFFFFF;
  /* RNF-08 · S15b · 3.6-8 · débito 61 · o laranja da MARCA (#e57200) mede 3,12:1 com o branco
     e 2,83:1 com o papel: ele desenha bem uma barra e uma borda, e falha como TEXTO. Este é o
     tom que alcança 5,02:1 com o branco e 4,56:1 com o papel — a mesma família, escurecida o
     bastante para a régua da RNF-08. Regra: `--orange`/`--os-orange`/`--v2-orange` ficam para
     superfície SEM texto; onde há texto (branco sobre laranja, ou laranja sobre claro), o
     token é este. */
  --laranja-texto:#b94f00;
}

*{margin:0;padding:0;box-sizing:border-box}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
a{color:inherit}
/* RNF-08 · S15b · 3.6-3 · o `[tabindex]` entra no MESMO seletor: o `main#conteudo` do salto
   e o trilho do shell recebem foco por programa e precisam do mesmo anel — um foco que a
   pessoa não vê é um foco que ela perdeu. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:none;
  box-shadow:var(--ng-focus);border-radius:8px}

/* ── 3 · Lockup da marca ─────────────────────────────────────────────────── */
.ng-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;line-height:1}
.ng-brand__mark{width:86px;height:38px;flex:none;display:block;
  background:url('/img/naturgy-logo.svg') left center/contain no-repeat}
/* o SVG oficial é monocromático herdando currentColor: em fundo escuro invertemos
   para branco puro, preservando a forma original do logotipo */
.topbar .ng-brand__mark{filter:brightness(0) invert(1)}
.ng-brand__sep{width:1px;height:24px;background:currentColor;opacity:.28;flex:none}
.ng-brand__os{font-family:var(--ng-font);font-weight:600;font-size:13.5px;
  letter-spacing:2.4px;text-transform:uppercase;white-space:nowrap}

/* ── 4 · Seletor de idioma (globo · PT ▾) ────────────────────────────────── */
.ng-lang{position:relative;display:inline-flex;align-items:center;font-family:var(--ng-font);flex:none}
.ng-lang__btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:999px;padding:6px 11px 6px 9px;
  font-size:12px;font-weight:600;cursor:pointer;line-height:1;transition:background .16s,border-color .16s}
.ng-lang__btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.ng-lang__btn svg{width:14px;height:14px;flex:none;opacity:.9}
.ng-lang__code{letter-spacing:.6px}
.ng-lang__car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.75;transition:transform .18s}
.ng-lang.open .ng-lang__car{transform:rotate(180deg)}
.ng-lang__menu{position:absolute;top:calc(100% + 9px);right:0;min-width:186px;background:#fff;
  border:1px solid var(--ng-line);border-radius:12px;box-shadow:var(--ng-shadow-lg);padding:5px;
  z-index:9999;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease;margin:0}
.ng-lang.open .ng-lang__menu{opacity:1;visibility:visible;transform:translateY(0)}
.ng-lang__opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:8px;
  background:none;border:0;cursor:pointer;font-family:var(--ng-font);font-size:13px;color:var(--ng-ink);text-align:left}
.ng-lang__opt:hover{background:var(--ng-blue-050)}
.ng-lang__opt.on{background:var(--ng-blue-100);color:var(--ng-blue-600);font-weight:600}
.ng-lang__flag{font-size:15px;line-height:1;flex:none}
.ng-lang__nm{flex:1}
.ng-lang__nm small{display:block;font-size:11px;color:var(--ng-ink-3);font-weight:400}
.ng-lang__opt.on .ng-lang__nm small{color:var(--ng-blue-400)}
.ng-lang__tick{color:var(--ng-orange-500);font-weight:700;opacity:0}
.ng-lang__opt.on .ng-lang__tick{opacity:1}
.ng-lang__form{display:contents}
/* variante para telas claras (sem barra escura no topo) */
.ng-lang--light .ng-lang__btn{background:#fff;border-color:var(--ng-line);color:var(--ng-ink-2)}
.ng-lang--light .ng-lang__btn:hover{border-color:var(--ng-blue-400);color:var(--ng-blue-600)}

@media (max-width:640px){
  .ng-brand__mark{width:70px;height:30px}
  .ng-lang__nm small{display:none}
}

/* RNF-08 · movimento reduzido não é enfeite de acessibilidade: transição e paralaxe
   provocam enjoo de verdade em quem tem distúrbio vestibular. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}