/* Ilumina Içara: estilos da home. Valores extraídos de referencia-design/Main.dc.html. */

/* Fontes locais (SIL OFL 1.1), sem requisição externa */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/public-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/public-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/public-sans-latin-600-normal.woff2) format('woff2')}

:root{
  --noite:#0A1329;
  --noite-2:#0E1933;
  --rodape:#070E20;
  --asfalto:#131E3A;
  --sodio:#F2A33A;
  --sodio-hover:#FFBE63;
  --acento:#8DB8FF;
  --led:#E6F0FF;
  --texto-2-escuro:#C3D0E8;
  --placa:#1F5FD6;
  --dia:#F3F5F8;
  --dia-2:#E7ECF4;
  --texto-2-claro:#36456A;
  --hairline:#C3CDDF;
  /* secundários do design */
  --foco-escuro:#8DB8FF;
  --borda-escura:#3B4C77;
  --trilho:#DCE4F0;
  --divisor-escopo:#B9C5DA;
  --rotulo-rodape:#8FA3C6;
  --divisor-rodape:#1B2A4D;
  --f-titulo:'Barlow Condensed','Arial Narrow',sans-serif;
  --f-corpo:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(20px,5vw,64px);
  --texto-2:var(--texto-2-claro);
}
.dk{--texto-2:var(--texto-2-escuro)}

body{margin:0;background:var(--dia);color:var(--noite);font-family:var(--f-corpo);font-size:18px;line-height:1.6}
a{color:inherit}
[hidden]{display:none!important}
.sprite{position:absolute}
a:focus-visible,button:focus-visible{outline:3px solid var(--placa);outline-offset:3px}
.dk a:focus-visible,.dk button:focus-visible{outline-color:var(--foco-escuro)}

h2{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:clamp(40px,5.2vw,76px);line-height:.96;text-wrap:balance}
.sec{padding:clamp(72px,9vw,128px) var(--gutter)}
.wrap{max-width:1240px;margin:0 auto}

/* Cabeçalho de seção: h2 à esquerda, parágrafo de apoio à direita */
.cabeca{display:flex;flex-wrap:wrap;gap:32px 8%;align-items:flex-end;justify-content:space-between}
.cabeca h2{flex:1 1 440px}
.cabeca p{flex:1 1 380px;margin:0;max-width:46ch;color:var(--texto-2);text-wrap:pretty}

/* ---------- Topo / hero ---------- */
.topo{background:var(--noite);color:var(--led);overflow:hidden}
.barra-topo{max-width:1320px;margin:0 auto;padding:28px var(--gutter) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.marca{display:flex;align-items:center;text-decoration:none;min-height:56px}
.marca img{display:block;height:56px;width:auto}
.nav-principal{display:flex;flex-wrap:wrap;gap:4px 28px;font-size:16px;font-weight:500}
.nav-principal a{text-decoration:none;padding:10px 0;color:var(--texto-2-escuro)}
a.nav:hover,.nav-principal a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
.nav-principal a[aria-current=page]{color:var(--led)}
.tel-topo{text-decoration:none;color:var(--led);font-weight:600;font-size:18px;min-height:44px;display:inline-flex;align-items:center}

.hero{max-width:1320px;margin:0 auto;padding:56px var(--gutter) 0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 32px}
.hero-texto{flex:1 1 540px;padding-bottom:96px}
h1{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:clamp(56px,8.4vw,124px);line-height:.9;letter-spacing:-.005em;color:var(--led);text-wrap:balance}
.hero-texto p{margin:32px 0 0;max-width:46ch;font-size:20px;color:var(--texto-2-escuro);text-wrap:pretty}
.acoes{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;background:var(--placa);color:#fff;font-weight:600;font-size:18px;text-decoration:none;border-radius:6px;box-shadow:inset 0 0 0 2px #8DB8FF}
a.btn:hover{background:#2F6FE4}
.link-secundario{display:inline-flex;align-items:center;min-height:52px;color:var(--led);font-weight:500;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.hero-cena{flex:1 1 460px;min-width:0;align-self:flex-end}
.ilustra{display:block;width:100%;height:auto}

/* Animação do hero: estado final por padrão; sequência só sem preferência por movimento reduzido */
.ig-amb{opacity:0}
.ig-led{opacity:1}
.p1{animation-delay:.5s}
.p2{animation-delay:.9s}
.p3{animation-delay:1.25s}
.p4{animation-delay:1.55s}
.p5{animation-delay:1.8s}
@keyframes ambFlick{0%{opacity:0}6%{opacity:.95}11%{opacity:.15}17%{opacity:.9}24%{opacity:.35}34%{opacity:1}62%{opacity:1}84%{opacity:0}100%{opacity:0}}
@keyframes ledOn{0%,60%{opacity:0}66%{opacity:.55}70%{opacity:.15}78%{opacity:1}100%{opacity:1}}
@keyframes textOn{0%,8%{color:#26345A}14%{color:#F2A33A}62%{color:#F2A33A}80%{color:#E6F0FF}100%{color:#E6F0FF}}
@keyframes swapIn{0%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion: no-preference){
  .ig-amb{animation:ambFlick 2.6s linear both}
  .ig-led{animation:ledOn 2.6s linear both}
  .ig-text{animation:textOn 2.6s linear both;animation-delay:.5s}
  .swap{animation:swapIn .45s ease-out both}
}

/* ---------- Serviços ---------- */
.servicos-grade{display:flex;flex-wrap:wrap;gap:56px 8%;align-items:flex-start}
.servicos-intro{flex:1 1 420px}
.servicos-intro p{margin:32px 0 0;max-width:46ch;color:var(--texto-2);text-wrap:pretty}
.servicos-lista{flex:1.2 1 480px;display:flex;flex-direction:column}
.servico{border-top:1px solid var(--hairline);padding:28px 0}
.servico:last-child{border-bottom:1px solid var(--hairline)}
.servico h3{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:32px;line-height:1.1}
.servico p{margin:8px 0 0;max-width:52ch;color:var(--texto-2)}

/* ---------- Tecnologia: comparador ---------- */
.tecnologia{background:var(--noite-2);color:var(--led)}
.tecnologia .cabeca{row-gap:40px}
.seletor{margin-top:48px;display:flex;flex-wrap:wrap;gap:12px}
.opcao{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:160px;padding:0 28px;border-radius:6px;font-family:inherit;font-size:18px;font-weight:600;cursor:pointer;background:transparent;color:var(--led);border:2px solid var(--borda-escura)}
.opcao--sodio{--ativa:var(--sodio)}
.opcao--led{--ativa:var(--led)}
.opcao[aria-pressed="true"]{background:var(--ativa);color:var(--noite);border-color:var(--ativa)}
.tela{margin-top:32px;background:var(--noite);border-radius:10px;overflow:hidden}
.comparador-textos{margin-top:32px;display:flex;flex-wrap:wrap;gap:24px 8%;align-items:flex-start;justify-content:space-between}
.comparador-textos .swap{flex:1 1 440px;margin:0;max-width:56ch;color:var(--texto-2);text-wrap:pretty}
.comparador-textos strong{font-weight:600}
.cor-sodio{color:var(--sodio)}
.cor-led{color:var(--led)}
.meta-led{flex:0 1 320px;margin:0;font-size:16px;color:var(--texto-2)}

/* ---------- Prazos ---------- */
.passos{margin:64px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:40px 32px}
.passo{border-top:2px solid var(--noite)}
.passo-ponto{width:16px;height:16px;border-radius:50%;background:var(--sodio);border:2px solid var(--noite);box-sizing:border-box;margin-top:-9px}
.passo-num{margin-top:20px;font-family:var(--f-titulo);font-weight:700;font-size:48px;line-height:1;color:var(--placa)}
.passo h3{margin:8px 0 0;font-family:var(--f-titulo);font-weight:600;font-size:28px;line-height:1.1}
.passo p{margin:8px 0 0;color:var(--texto-2);font-size:17px}
.prazos-duplo{margin-top:80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1000px}
.prazo-col{padding:0 clamp(16px,4vw,48px);display:flex;flex-direction:column}
.prazo-col:first-child{padding-left:0}
.prazo-col+.prazo-col{border-left:1px solid var(--hairline)}
.prazo-col h3{font-family:var(--f-titulo);font-weight:700;margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:2.1em;font-size:clamp(26px,3.2vw,44px);line-height:1.05}
.prazo-col h3 svg{flex:0 0 auto}
.prazo-valor{margin:clamp(32px,6vw,72px) 0 0;font-family:var(--f-titulo);font-weight:700;font-size:clamp(34px,6vw,88px);line-height:1;color:var(--noite);white-space:nowrap}
.prazo-col p:last-child{margin:16px 0 0;max-width:24ch;color:var(--texto-2);text-wrap:pretty}
.prazos-nota{margin:48px 0 0;max-width:52ch;color:var(--texto-2)}
@media (max-width:560px){.prazo-col{padding:0 12px}.prazo-col h3{flex-direction:column;align-items:flex-start;font-size:26px;min-height:104px}.prazo-valor{margin-top:28px}.prazo-col h3 svg{width:32px;height:32px}}

/* ---------- Escopo ---------- */
.escopo{background:var(--dia-2)}
.escopo-colunas{margin-top:56px;display:flex;flex-wrap:wrap;gap:48px 8%}
.escopo-col{flex:1 1 360px}
.escopo-col h3{margin:0 0 8px;font-family:var(--f-titulo);font-weight:700;font-size:36px;line-height:1.1;color:var(--noite)}
.escopo-col--fora,.escopo-col--fora h3{color:var(--texto-2-claro)}
.itens{list-style:none;margin:0;padding:0}
.itens li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--divisor-escopo)}
.itens li:last-child{border-bottom:1px solid var(--divisor-escopo)}
.itens svg{flex:0 0 24px;margin-top:2px}

/* ---------- Equipes em campo ---------- */
.campo p{margin:24px 0 0;max-width:52ch;color:var(--texto-2);text-wrap:pretty}
.galeria{margin-top:48px;display:flex;flex-wrap:wrap;gap:24px}
.foto-grande{flex:2 1 420px;min-height:460px}
.fotos-menores{flex:1 1 260px;display:flex;flex-direction:column;gap:24px}
.foto-menor{min-height:218px;flex:1 1 auto}
.ph-foto{display:flex;align-items:center;justify-content:center;border:2px dashed #9FB0CC;border-radius:8px;background-color:var(--trilho);background-image:repeating-linear-gradient(135deg,rgba(10,19,41,.06) 0 2px,transparent 2px 16px);color:var(--texto-2-claro);font-weight:500;text-align:center;padding:24px}
/* foto real enviada pelo painel: preenche o quadro sem distorcer */
.galeria picture{position:relative;display:block;border-radius:8px;overflow:hidden;background:var(--trilho)}
.galeria img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Atendimento ---------- */
.atendimento{background:var(--noite);color:var(--led)}
.atend-grade{display:flex;flex-wrap:wrap;gap:56px 6%;align-items:center}
.atend-texto{flex:1 1 380px}
.atend-texto p{margin:28px 0 0;max-width:44ch;color:var(--texto-2);text-wrap:pretty}
.canais{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.ghost{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border:2px solid var(--borda-escura);border-radius:6px;color:var(--led);font-weight:500;text-decoration:none}
.ghost--forte{border-color:var(--led);font-weight:600}
a.ghost:hover{background:rgba(230,240,255,.12)}
.atend-placa{flex:1.1 1 420px;min-width:0}
.placa{background:var(--placa);border-radius:24px;padding:12px}
.placa-borda{border:3px solid #FFFFFF;border-radius:14px;padding:clamp(24px,4vw,56px);color:#FFFFFF}
.placa-titulo{font-size:clamp(18px,2vw,24px);font-weight:600}
.placa-numero{display:block;margin-top:8px;color:#FFFFFF;text-decoration:none;font-family:var(--f-titulo);font-weight:700;font-size:clamp(48px,4.8vw,76px);line-height:.95;letter-spacing:.005em;white-space:nowrap}
.placa-app{margin-top:12px;font-size:17px}
.placa-app strong{font-weight:600}
.placa-app a{color:#FFFFFF;text-decoration:underline;text-underline-offset:4px}
/* sobre o azul da placa, o contorno claro padrão some: usa branco */
.dk .placa a:focus-visible{outline-color:#FFFFFF}

/* ---------- Rodapé / ficha da concessão ---------- */
.rodape{background:var(--rodape);color:var(--texto-2-escuro);padding:56px var(--gutter) 40px;font-size:16px}
.rodape-grade{display:flex;flex-wrap:wrap;gap:32px 8%;align-items:flex-start;justify-content:space-between}
.rodape-sobre{flex:1 1 260px}
.rodape-logo{display:block;height:64px;width:auto}
.rodape-sobre p{margin:16px 0 0;max-width:34ch}
.ficha{flex:2 1 520px;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:24px 32px}
.ficha dt{font-size:14px;color:var(--rotulo-rodape)}
.ficha dd{margin:4px 0 0;color:var(--led);font-weight:500}
.ficha dd.links{display:flex;flex-wrap:wrap;gap:4px 20px}
/* design usa 32px; 44px atende o piso de alvo de toque do projeto */
.ficha a{color:var(--led);font-weight:500;min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.copy{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--divisor-rodape);font-size:14px;color:var(--rotulo-rodape)}

/* ---------- Hero: postes clicáveis ---------- */
.hero-cena{position:relative}
.poste-btn{position:absolute;min-width:44px;padding:0;margin:0;border:0;border-radius:6px;background:transparent;cursor:pointer;transform:translateX(-50%)}
.poste-btn:focus-visible{outline:3px solid var(--foco-escuro);outline-offset:2px}
.pt1{left:20.66%;width:15.8%;top:22.8%;height:63%}
.pt2{left:43.03%;width:13.2%;top:34.3%;height:51.4%}
.pt3{left:62.24%;width:10.5%;top:43.6%;height:42.1%}
.pt4{left:76.84%;width:8.7%;top:50.7%;height:35%}
.pt5{left:88.16%;width:7.4%;top:55.7%;height:30%}
/* depois da sequência de abertura, o nível de laranja de cada poste (--a, de 0 a 1) manda na luz */
.ilustra-pronta .ig-amb{animation:none;opacity:var(--a,0)}
.ilustra-pronta .ig-led{animation:none;opacity:calc(1 - var(--a,0))}

/* ---------- Tecnologia: telegestão e certificações ---------- */
.tele,.certificacoes{margin-top:96px;padding-top:56px;border-top:1px solid var(--borda-escura)}
.tele{display:flex;flex-wrap:wrap;gap:56px 8%;align-items:flex-start}
.tele-texto{flex:1 1 420px}
.tele-beneficios{flex:1.1 1 440px}
.tele h3,.certificacoes h3{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:clamp(30px,3.2vw,44px);line-height:1.05;text-wrap:balance}
.tele-texto p{margin:20px 0 0;max-width:52ch;color:var(--texto-2);text-wrap:pretty}
.tele-lista{margin:24px 0 0;padding:0;list-style:none;max-width:52ch}
.tele-lista li{padding:12px 0 12px 22px;border-top:1px solid var(--borda-escura);position:relative}
.tele-lista li::before{content:"";position:absolute;left:0;top:1.35em;width:8px;height:8px;border-radius:50%;background:var(--acento)}
.tele-lista li:last-child{border-bottom:1px solid var(--borda-escura)}
.beneficios{margin:24px 0 0;padding:0;list-style:none}
.beneficios li,.lista-passos li{display:flex;gap:24px;padding:24px 0;border-top:1px solid var(--borda-escura)}
.beneficios li:last-child,.lista-passos li:last-child{border-bottom:1px solid var(--borda-escura)}
.beneficio-num,.lp-num{flex:0 0 40px;font-family:var(--f-titulo);font-weight:700;font-size:48px;line-height:1;color:var(--acento)}
.beneficios h4,.lista-passos h4{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:28px;line-height:1.1}
.beneficios p,.lista-passos p{margin:8px 0 0;max-width:52ch;color:var(--texto-2);font-size:17px;text-wrap:pretty}
.lista-passos strong,.luminaria strong{color:var(--led);font-weight:600}
.iso{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:0 8%}
.iso>div{flex:1 1 320px;padding:20px 0;border-top:1px solid var(--borda-escura)}
.iso dt{font-family:var(--f-titulo);font-weight:700;font-size:40px;line-height:1;color:var(--led)}
.iso dd{margin:8px 0 0;max-width:40ch;color:var(--texto-2)}

/* ---------- Atendimento completo ---------- */
.atend-passos,.atend-canais,.luminaria{margin-top:96px}
.luminaria{display:flex;flex-wrap:wrap;gap:32px 6%;align-items:center;padding:clamp(24px,4vw,48px);border:3px solid var(--acento);border-radius:14px}
.luminaria-desenho{flex:0 1 320px;width:100%;max-width:320px;height:auto}
.luminaria-texto{flex:1 1 360px}
.luminaria h3,.atend-passos h3,.canal h3{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:clamp(30px,3.2vw,44px);line-height:1.05;text-wrap:balance}
.luminaria-texto p{margin:16px 0 0;max-width:56ch;color:var(--texto-2);text-wrap:pretty}
.atend-sub{margin:16px 0 0;max-width:52ch;color:var(--texto-2)}
.lista-passos{margin:32px 0 0;padding:0;list-style:none}
.aviso-chuva{margin:32px 0 0;max-width:62ch;color:var(--texto-2);text-wrap:pretty}
.aviso-chuva strong{color:var(--acento);font-weight:600}
.atend-canais{display:flex;flex-wrap:wrap;gap:48px 8%}
.canal{flex:1 1 360px}
.canal p{margin:16px 0 0;max-width:46ch;color:var(--texto-2);text-wrap:pretty}
.canal .canais{margin-top:24px}
.canal-destaque{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-family:var(--f-titulo);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1;color:var(--led);text-decoration:none}
.canal-destaque:hover{text-decoration:underline;text-underline-offset:6px}
.atend-claro{width:100vw;box-sizing:border-box;margin:80px calc(50% - 50vw) 0;padding:clamp(40px,6vw,72px) var(--gutter);background:#fff;color:var(--noite)}
.atend-fluxo{max-width:1240px;margin:0 auto;padding:0;color:var(--noite)}
.atend-fluxo>h3{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:clamp(34px,4.2vw,56px);line-height:.98;text-wrap:balance;color:var(--noite)}
.atend-fluxo>p{margin-top:16px;color:var(--texto-2-claro)}
.atend-fluxo .passos{margin-top:48px;gap:32px 28px}
.atend-fluxo .passo{border-color:var(--hairline);padding-top:0}
.atend-fluxo .passo-ponto{border-color:#fff}
.atend-fluxo .passo-num{margin-top:16px;color:var(--placa)}
.atend-fluxo .passo h4{margin:8px 0 0;max-width:18ch;font-family:var(--f-titulo);font-weight:600;font-size:28px;line-height:1.1;color:var(--noite)}
.atend-fluxo .passo p{max-width:38ch;color:var(--texto-2-claro)}
.atend-fluxo .prazos-duplo{margin-top:56px;padding-top:32px;border-top:1px solid var(--hairline)}
.atend-fluxo .prazo-col{padding-right:32px;padding-left:32px}
.atend-fluxo .prazo-col:first-child{padding-left:0}
.atend-fluxo .prazo-col+.prazo-col{border-left-color:var(--hairline)}
.atend-fluxo .prazo-col h4{font-family:var(--f-titulo);font-weight:700;margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:2.1em;font-size:clamp(26px,3.2vw,44px);line-height:1.05;color:var(--noite)}
.atend-fluxo .prazo-col h4 svg{flex:0 0 auto}
.atend-fluxo .prazo-valor{margin-top:32px;color:var(--noite)}
.atend-fluxo .prazo-col p:last-child,.atend-fluxo .prazos-nota{color:var(--texto-2-claro)}
.atend-fluxo .prazos-nota{margin-top:24px}
.atend-claro .atend-canais{max-width:1240px;margin:72px auto 0;padding-top:48px;border-top:1px solid var(--hairline)}
.atend-claro .canal h3{color:var(--noite)}
.atend-claro .canal p{color:var(--texto-2-claro)}
.atend-claro .canal-destaque{color:var(--noite)}
.atend-claro .ghost{border-color:var(--hairline);color:var(--noite)}
.atend-claro .ghost--forte{border-color:var(--placa)}
.atend-claro a.ghost:hover{background:var(--dia-2)}
.atend-claro a:focus-visible{outline-color:var(--placa)}
@media (max-width:560px){
  .atend-claro{margin-top:64px}
  .atend-fluxo .passos{margin-top:36px;gap:28px}
  .atend-fluxo .prazos-duplo{grid-template-columns:1fr;gap:28px;margin-top:40px;padding-top:28px}
  .atend-fluxo .prazo-col,.atend-fluxo .prazo-col:first-child{padding:0}
  .atend-fluxo .prazo-col+.prazo-col{padding-top:28px;border-top:1px solid var(--hairline);border-left:0}
  .atend-fluxo .prazo-col h4{flex-direction:row;align-items:center;min-height:0}
  .atend-fluxo .prazo-valor{margin-top:20px}
  .atend-claro .atend-canais{margin-top:48px;padding-top:36px}
}

.ficha .links{gap:8px}
.ficha a.rede-link{gap:10px;padding:0 14px 0 8px;border:1px solid var(--divisor-rodape);border-radius:999px;text-decoration:none;transition:border-color .2s ease,background-color .2s ease}
.rede-icone{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#132344}
.rede-icone svg{display:block;width:18px;height:18px}
.ficha a.rede-link:hover{border-color:var(--acento);background:#0E1933}
@media (prefers-reduced-motion: reduce){.ficha a.rede-link{transition:none}}

/* ---------- Página Sobre nós ---------- */
.topo--pagina .hero-pagina{max-width:1320px;margin:0 auto;padding:72px var(--gutter) clamp(72px,9vw,128px)}
.rotulo-pagina{margin:0 0 20px;font-weight:600;font-size:18px;color:var(--acento)}
.hero-pagina h1{max-width:14ch}
.hero-pagina .lede{margin:32px 0 0;max-width:46ch;font-size:20px;color:var(--texto-2-escuro);text-wrap:pretty}
.sobre-corpo{display:flex;flex-wrap:wrap;gap:56px 8%;align-items:flex-start}
.sobre-texto{flex:1 1 420px}
.sobre-texto p{margin:32px 0 0;max-width:52ch;color:var(--texto-2);text-wrap:pretty}
.politica{flex:1 1 420px;margin:0;padding:0 0 0 clamp(20px,3vw,40px);border-left:4px solid var(--acento)}
.politica h3{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:32px;line-height:1.1}
.politica p{margin:16px 0 0;max-width:52ch;color:var(--noite);text-wrap:pretty}
.mvv{margin-top:56px;display:flex;flex-direction:column}
.mvv-linha{display:flex;flex-wrap:wrap;gap:12px 8%;padding:32px 0;border-top:1px solid var(--divisor-escopo)}
.mvv-linha:last-child{border-bottom:1px solid var(--divisor-escopo)}
.mvv-linha h3{flex:0 0 220px;margin:0;font-family:var(--f-titulo);font-weight:700;font-size:44px;line-height:1}
.mvv-linha p,.valores{flex:1 1 400px;margin:0;max-width:56ch;color:var(--texto-2-claro);text-wrap:pretty}
.mvv-linha .missao{font-size:24px;color:var(--noite);font-weight:500}
.valores{padding:0;list-style:none}
.valores li{display:flex;gap:14px;align-items:flex-start;padding:10px 0}
.valores li::before{content:"";flex:0 0 12px;height:12px;margin-top:.55em;border-radius:50%;background:var(--acento);border:2px solid var(--noite);box-sizing:border-box}
.valores li:first-child{padding-top:0}
/* título acompanha a proporção de postes em sódio (--h, de 0 a 1) */
.texto-pronto{animation:none;color:color-mix(in srgb,var(--sodio) calc(var(--h,0) * 100%),var(--led))}

.ghost svg{flex:0 0 22px;margin-right:10px}
.canais-passo{margin-top:20px}

/* ---------- Galeria ---------- */
.campo .cabeca p{margin-top:0}
.galeria-filtros{margin-top:48px;display:flex;flex-wrap:wrap;gap:10px}
.filtro{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:6px;border:2px solid var(--hairline);background:transparent;color:var(--noite);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.filtro span{font-weight:500;color:var(--texto-2-claro)}
.filtro:hover{border-color:var(--noite)}
.filtro[aria-pressed="true"]{background:var(--noite);border-color:var(--noite);color:var(--led)}
.filtro[aria-pressed="true"] span{color:var(--texto-2-escuro)}
.galeria-grade{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));grid-auto-rows:clamp(200px,22vw,280px);grid-auto-flow:dense;gap:16px}
.quadro{position:relative;border-radius:8px;overflow:hidden;background:var(--trilho)}
@media (min-width:700px){.quadro:nth-child(7n+1){grid-column:span 2}.quadro:nth-child(7n+5){grid-row:span 2}}
.foto-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;display:block}
.foto-btn picture,.foto-btn img{display:block;width:100%;height:100%}
.foto-btn img{object-fit:cover;transition:transform .45s ease-out}
.foto-btn:hover img{transform:scale(1.04)}
.campo .quadro-leg,.quadro-leg{max-width:none;position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 14px;background:rgba(10,19,41,.86);color:var(--led);font-size:15px;line-height:1.35;pointer-events:none;display:flex;flex-direction:column;gap:2px}
.campo .quadro-leg span,.quadro-leg span{font-size:13px;font-weight:600;color:var(--acento)}
.galeria-status{margin:20px 0 0;font-size:15px;color:var(--texto-2-claro)}
.galeria-mais{margin-top:16px}
.ghost--claro{color:var(--noite);border-color:var(--noite);background:transparent;font-family:inherit;font-size:18px;cursor:pointer}
a.ghost--claro:hover,button.ghost--claro:hover{background:rgba(10,19,41,.08)}
.visualizador{padding:0;border:0;background:transparent;max-width:min(1200px,96vw);max-height:96vh;width:100%;color:var(--led);overflow:visible}
.visualizador::backdrop{background:rgba(7,14,32,.94)}
.visualizador figure{margin:0}
.visualizador img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:6px}
.visualizador figcaption{margin-top:12px;font-size:17px;text-align:center}
.vis-controles{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.vis-btn{min-height:48px;min-width:110px;padding:0 22px;border:2px solid var(--borda-escura);border-radius:6px;background:var(--noite);color:var(--led);font:inherit;font-weight:600;cursor:pointer}
.vis-btn:hover{border-color:var(--led)}
.vis-btn--fechar{background:var(--led);border-color:var(--led);color:var(--noite)}
.visualizador button:focus-visible{outline:3px solid var(--foco-escuro);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.foto-btn img{transition:none}}

/* ---------- Placa do 0800 com QR Code ---------- */
.placa-info{min-width:0}
.placa-qr{margin:32px 0 0;display:flex;align-items:center;gap:20px;color:#FFFFFF}
.placa-qr a{flex:0 0 auto;display:block;background:#FFFFFF;border-radius:10px;padding:8px;width:136px;box-sizing:content-box}
.placa-qr svg{display:block;width:100%;height:auto}
.placa-qr figcaption{max-width:26ch;font-size:16px;line-height:1.4;text-wrap:pretty}

/* ---------- Página de contatos (destino do QR Code) ---------- */
.contatos-lista{list-style:none;margin:48px 0 0;padding:0;max-width:640px}
.contatos-lista li{border-top:1px solid var(--borda-escura)}
.contatos-lista li:last-child{border-bottom:1px solid var(--borda-escura)}
.contato-link{display:flex;align-items:center;gap:18px;min-height:72px;padding:12px 4px;text-decoration:none;color:var(--led)}
.contato-link:hover{background:rgba(230,240,255,.06)}
.contato-link svg{flex:0 0 28px}
.contato-link strong{display:block;font-size:20px;font-weight:600;line-height:1.2}
.contato-link small{display:block;font-size:15px;color:var(--texto-2-escuro)}
.aviso-numero{margin:32px 0 0;max-width:52ch;color:var(--texto-2-escuro);text-wrap:pretty}
.aviso-numero strong{color:var(--acento);font-weight:600}