/* ============================================================
   LUCENA ENERGIA — sistema visual v2
   Cor e tipografia tiradas do vetor oficial da marca (não de print).
   Azul #1E547B (PMS 2153) · Verde #70C38D (PMS 368)
   Movimento: teto 300ms, padrão 200ms, nunca ease-in, nunca transition:all.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- marca --- */
  --azul:#1E547B;          /* PMS 2153 — cor primária, traço do escudo */
  --azul-fundo:#143B57;    /* azul mais fundo, para contraste de texto e rodapé */
  --azul-claro:#3E7CA6;    /* azul de apoio, links e estados */
  --azul-vapor:#DCE7EF;    /* azul lavado, fundo de bloco */
  --verde:#70C38D;         /* PMS 368 — cor de apoio, natureza */
  --verde-fundo:#3F8F5E;   /* verde escuro, para texto sobre claro */
  --verde-vapor:#E3F2E8;   /* verde lavado */
  --sol:#E9A63B;           /* âmbar, só para alerta e destaque de energia */

  /* --- superfícies claras --- */
  --papel:#FBFAF7;         /* branco gelo levemente quente: a base do site */
  --papel-2:#F3F1EC;       /* creme claro, para alternar seção */
  --papel-3:#EAE7E0;       /* creme fundo, bordas e divisórias suaves */
  --branco:#FFFFFF;

  /* --- texto --- */
  --tinta:#14252F;         /* quase preto azulado, corpo */
  --tinta-media:#4A5C66;   /* texto secundário */
  --tinta-fraca:#627079;   /* legenda, metadado */
  --linha:rgba(20,37,47,.11);
  --linha-forte:rgba(20,37,47,.20);

  /* --- forma --- */
  --esp-1:4px;--esp-2:8px;--esp-3:12px;--esp-4:16px;--esp-5:24px;--esp-6:32px;--esp-7:48px;--esp-8:64px;--esp-9:96px;
  --raio:12px;
  --raio-g:18px;
  --sombra-1:0 1px 2px rgba(20,37,47,.05);
  --sombra-2:0 2px 4px rgba(20,37,47,.04), 0 12px 28px -8px rgba(20,37,47,.10);
  --sombra-3:0 4px 8px rgba(20,37,47,.05), 0 24px 48px -12px rgba(30,84,123,.16);

  /* --- tipografia: 3 famílias, cada uma com um trabalho --- */
  --display:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;  /* título: grotesca moderna, pouco vista, não é a Inter de todo mundo */
  --corpo:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;   /* mesma família no corpo: 3 famílias no total, como manda a régua */
  --leitura:'Source Serif 4',Georgia,serif;                 /* artigo longo: cara de publicação técnica */
  --mono:'IBM Plex Mono',ui-monospace,monospace;            /* número, etiqueta, dado */

  /* --- movimento (teto 300ms) --- */
  --t-rapido:140ms;
  --t-padrao:200ms;
  --t-lento:280ms;
  --curva:cubic-bezier(.2,0,0,1);       /* saída: começa rápido, assenta */
  --curva-suave:cubic-bezier(.4,0,.2,1);

  /* --- gradiente da marca: sai do azul e chega no verde --- */
  --grad:linear-gradient(115deg,var(--azul) 0%,var(--azul-claro) 46%,var(--verde-fundo) 78%,var(--verde) 100%);
  --verde-tinta:#2A6642;   /* SÓ para texto verde sobre fundo claro, nunca como superfície */
  --grad-forte:linear-gradient(118deg,var(--azul-fundo) 0%,var(--azul) 40%,var(--verde-fundo) 74%,var(--verde) 100%);
  --grad-claro:linear-gradient(115deg,var(--azul-vapor) 0%,var(--verde-vapor) 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--corpo);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.022em;line-height:1.1;margin:0;color:var(--azul-fundo)}
h1{font-size:clamp(2.5rem,5.6vw,4.6rem);font-weight:400;letter-spacing:-.038em}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem);font-weight:400;letter-spacing:-.032em}
h3{font-size:1.22rem;font-weight:500;letter-spacing:-.012em}
h4{font-size:1.02rem;font-weight:600}
p{margin:0 0 1em}
a{color:inherit}
strong,b{font-weight:600}
::selection{background:rgba(112,195,141,.34)}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.serif{font-family:var(--leitura)}

/* olho: a etiqueta de seção, com o traço curto antes */
.olho{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--azul);display:inline-flex;align-items:center;gap:11px;font-weight:500;
}
.olho::before{content:'';width:24px;height:1px;background:currentColor;flex:none;opacity:.7}
.olho--claro{color:var(--verde)}

.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.wrap--estreito{max-width:760px}

/* ---------- botões ---------- */
.btn{
  --b:var(--azul);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  background:var(--b);background-image:var(--b-grad,var(--grad));background-size:180% 100%;background-position:0% 0;
  color:#fff;font:500 .95rem/1 var(--corpo);letter-spacing:.005em;
  text-decoration:none;cursor:pointer;isolation:isolate;overflow:hidden;
  transition:background-position var(--t-lento) var(--curva), box-shadow var(--t-padrao) var(--curva), transform var(--t-rapido) var(--curva);
}
.btn:hover{background-position:100% 0;box-shadow:0 6px 20px -6px rgba(30,84,123,.45)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

.btn--verde{--b-grad:linear-gradient(115deg,var(--verde-fundo),var(--azul-claro))}
.btn--claro{--b:#fff;--b-grad:none;color:var(--azul)}
.btn--claro:hover{background:var(--verde);color:var(--azul-fundo)}

/* botão de contorno vivo: a linha percorre a borda ao passar o mouse.
   Feito com conic-gradient girando dentro de uma máscara de borda. Sem JS. */
.btn--linha{
  --b:transparent;--b-grad:none;color:var(--azul);border-color:var(--linha-forte);background:transparent;
}
.btn--linha::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--giro,0deg), transparent 0deg, var(--verde) 40deg, var(--azul-claro) 80deg, transparent 130deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--t-padrao) var(--curva);z-index:-1;
}
.btn--linha:hover{background:rgba(30,84,123,.04);color:var(--azul-fundo)}
.btn--linha:hover::before{opacity:1;animation:girar 2.4s linear infinite}
@property --giro{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes girar{to{--giro:360deg}}

/* ---------- superfícies ---------- */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);padding:var(--esp-5)}
.card--vapor{background:var(--azul-vapor);border-color:transparent}
.card--verde{background:var(--verde-vapor);border-color:transparent}

/* marca d'água: o símbolo do escudo, grande e apagado, atrás do conteúdo */
.dagua{position:relative;isolation:isolate;overflow:hidden}
.dagua::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  /* a insígnia é o recorte quadrado do escudo. O lucena-simbolo.svg servia antes e desperdiçava
     52% da caixa em vazio, porque lá o escudo ocupa só 48% da largura do viewBox. */
  right:-4%;top:50%;translate:0 -50%;width:min(34%,400px);aspect-ratio:1/1;
  background:var(--dagua-img,url('/assets/marca/lucena-insignia-azul.svg')) center/contain no-repeat;
  opacity:var(--dagua-op,.045);
}
.dagua--esq::after{right:auto;left:-8%}
.dagua--claro::after{background-image:url('/assets/marca/lucena-insignia-branco.svg');opacity:var(--dagua-op,.07)}

/* brilho suave: um halo da marca, para dar profundidade sem blur pesado */
.glow{position:relative;isolation:isolate}
.glow::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:-18% -12%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(112,195,141,.22), rgba(112,195,141,0) 62%);
}
.glow--azul::before{background:radial-gradient(ellipse at 50% 50%, rgba(62,124,166,.24), rgba(62,124,166,0) 64%)}

/* gradiente da marca, para faixa e para véu sobre foto */
.grad-marca{background:var(--grad)}
.grad-borda{position:relative}
.grad-borda::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad);border-radius:99px}
.grad-texto{
  background:linear-gradient(100deg,var(--azul) 12%,var(--verde-fundo) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- pílulas de estado ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font:500 .74rem/1.4 var(--mono);letter-spacing:.02em;white-space:nowrap}
.pill--ok{background:var(--verde-vapor);color:var(--verde-tinta)}
.pill--off{background:#FBE7E0;color:#A0431F}
.pill--atencao{background:#FCF0DA;color:#8A6118}
.pill--neutro{background:var(--papel-3);color:var(--tinta-media)}
.pill--azul{background:var(--azul-vapor);color:var(--azul)}

/* ---------- revelação no scroll ---------- */
[data-rev]{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-lento) var(--curva), transform var(--t-lento) var(--curva)}
[data-rev].vis{opacity:1;transform:none}

/* ---------- respeito a quem não quer movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-rev]{opacity:1;transform:none}
}

/* ---------- utilitários ---------- */
.grade{display:grid;gap:18px}
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
hr{border:0;border-top:1px solid var(--linha);margin:34px 0}