/* Site público Lucena Energia — claro, modernista, sem cara de template.
   Referências destrinchadas: Arup (faixa de tipo acima da mídia), sbp.de (foto em
   cinemascope e display ultraleve), Our World in Data (texto marinho, veja também),
   Casa dos Ventos (hover assimétrico 150 entra / 240 sai). */

.site{background:var(--papel)}

/* ---------- barra de progresso e navegação ---------- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:transparent;pointer-events:none}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--azul-claro) 55%,var(--verde));width:0}

.nav{position:sticky;top:0;z-index:90;background:rgba(251,250,247,.86);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background-color 240ms var(--curva),border-color 240ms var(--curva)}
.nav.solto{background:rgba(251,250,247,.96);border-bottom-color:var(--linha)}
.nav__in{display:flex;align-items:center;gap:28px;height:72px}
.nav__marca{flex:none;display:block}
.nav__marca img{height:46px;display:block}
@media(max-width:520px){.nav__marca img{height:38px}}
.nav__links{display:flex;gap:26px;margin-left:auto}
.nav__links a{position:relative;text-decoration:none;font-size:.92rem;font-weight:500;color:var(--tinta-media);padding:5px 0;
  transition:color 150ms var(--curva)}
.nav__links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--verde-fundo);
  transition:right 150ms var(--curva)}
.nav__links a:hover{color:var(--azul-fundo)}
.nav__links a:hover::after{right:0}
@media(max-width:900px){.nav__links{display:none}.nav__in{gap:14px}}

/* menu do celular */
.nav__abre{display:none;flex:none;width:42px;height:42px;border:1px solid var(--linha);border-radius:12px;
  background:var(--papel);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.nav__abre i{display:block;width:17px;height:1.6px;background:var(--tinta-media);border-radius:2px;
  transition:transform var(--t-padrao) var(--curva),opacity var(--t-rapido) var(--curva)}
.nav__abre[aria-expanded="true"] i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.nav__abre[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav__abre[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.nav__mob{display:none;flex-direction:column;border-top:1px solid var(--linha);background:var(--papel);
  padding:8px 0 14px}
.nav__mob a{padding:13px clamp(18px,5vw,32px);text-decoration:none;font-size:1rem;font-weight:500;
  color:var(--tinta);border-bottom:1px solid var(--linha)}
.nav__mob a:last-child{border-bottom:0}
.nav__mob a:active{background:var(--papel-2)}
@media(max-width:900px){
  .nav__abre{display:flex}
  .nav__mob:not([hidden]){display:flex}
  .nav__in .btn{margin-left:auto;padding:11px 18px;font-size:.88rem}
}
@media(max-width:420px){.nav__in .btn{display:none}}

/* ---------- HERO: faixa de tipo ACIMA da mídia, jeito Arup ----------
   Isso resolve de uma vez o problema de texto sobre foto de baixo contraste,
   e é o oposto do template de SaaS com headline em cima de imagem escurecida. */
.hero{padding-top:clamp(30px,4vw,58px)}
.hero__tipo{padding-bottom:clamp(32px,4vw,56px)}
.hero h1{font-size:clamp(2.6rem,6.2vw,5.2rem);font-weight:400;letter-spacing:-.035em;line-height:1.02;
  color:var(--azul-fundo);margin:20px 0 0;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--verde-fundo)}
.hero__sub{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,64px);align-items:end;
  margin-top:clamp(26px,3vw,40px);padding-top:26px;border-top:1px solid var(--linha)}
.hero__sub p{max-width:52ch;font-size:1.1rem;color:var(--tinta-media);margin:0}
.hero__acoes{display:flex;gap:12px;flex-wrap:wrap;flex:none}
@media(max-width:800px){.hero__sub{grid-template-columns:1fr}}

/* mídia em cinemascope, o corte que tira a cara de banco de imagem */
.hero__midia{position:relative;overflow:hidden;border-radius:var(--raio-g);aspect-ratio:21/9;background:var(--azul-fundo)}
.hero__midia img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero__selo{position:absolute;left:clamp(16px,2.5vw,32px);bottom:clamp(16px,2.5vw,32px);
  display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;
  background:rgba(20,59,87,.88);color:#fff}
.hero__selo img{width:22px;height:22px;object-fit:contain;flex:none}
.hero__selo span{font:.82rem var(--mono);letter-spacing:.02em}
@media(max-width:700px){.hero__midia{aspect-ratio:4/3}.hero__selo{display:none}}

/* ---------- seções ---------- */
.secao{padding:clamp(50px,6vw,92px) 0;position:relative}
.secao--creme{background:var(--papel-2)}
.secao--azul{background:var(--azul-fundo);color:#C7DAE5}
.secao h2{margin-bottom:16px}
.secao h2 em{font-style:normal;color:var(--verde-fundo)}
.secao--azul h2{color:#fff}
.secao--azul h2 em{color:var(--verde)}
.secao--azul .olho{color:var(--verde)}
.secao--azul .lead{color:#B0C6D2}
.lead{max-width:62ch;font-size:1.08rem;color:var(--tinta-media)}
.cab{margin-bottom:clamp(30px,4vw,52px)}
.cab .olho{margin-bottom:16px}

/* ---------- números ---------- */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--raio-g);overflow:hidden}
.num{background:var(--azul-fundo);padding:26px 22px}
.num b{display:block;font:400 clamp(1.7rem,3vw,2.5rem)/1.02 var(--display);letter-spacing:-.035em;
  background:linear-gradient(100deg,#8FD4A8,var(--verde) 55%,#A8DCF0);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.num b em{font-style:normal;font-size:.52em;letter-spacing:0;margin-right:.14em;vertical-align:.14em}
.num b i{display:block;font-style:normal;font-size:.42em;letter-spacing:.02em;margin-top:2px;opacity:.82;-webkit-text-fill-color:currentColor;color:#8FB0C6}
.num span{display:block;font:.7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#A4BCCA;margin-top:12px}
.num u{display:block;text-decoration:none;font-size:.85rem;color:#9BB5C4;margin-top:5px;line-height:1.45}

/* ---------- tese ---------- */
.tese{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,5vw,70px);align-items:start}
@media(max-width:860px){.tese{grid-template-columns:1fr}}
.tese p{font-size:1.06rem;line-height:1.7;color:var(--tinta-media)}
.tese p b{color:var(--azul-fundo)}
.tese__frase{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.35;
  letter-spacing:-.018em;color:var(--azul-fundo);border-left:2px solid var(--verde);padding-left:22px}

/* ---------- etapas ---------- */
.etapas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--linha);
  border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden}
.et{background:var(--papel);padding:28px 24px;transition:background-color 150ms var(--curva)}
.et:hover{background:var(--branco)}
.et i{display:block;font:.7rem var(--mono);letter-spacing:.11em;color:var(--verde-fundo);font-style:normal;margin-bottom:16px}
.et h3{margin-bottom:9px}
.et p{margin:0;font-size:.93rem;color:var(--tinta-media);line-height:1.6}

/* ---------- serviços ---------- */
.servs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.serv{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);padding:26px;
  transition:border-color 150ms var(--curva),box-shadow 150ms var(--curva),transform 150ms var(--curva)}
.serv:hover{border-color:transparent;box-shadow:var(--sombra-2),0 0 0 1.5px transparent;background-image:var(--grad-claro);transform:translateY(-2px)}
.serv__n{font:.7rem var(--mono);letter-spacing:.14em;color:var(--tinta-fraca);display:block;margin-bottom:14px}
.serv h3{margin-bottom:9px}
.serv p{font-size:.94rem;color:var(--tinta-media);line-height:1.6;margin-bottom:14px}
.serv__quem{font-size:.84rem;color:var(--verde-tinta);padding-top:13px;border-top:1px solid var(--linha)}
.serv__quem b{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-fraca);
  display:block;margin-bottom:4px}

/* ---------- obras ---------- */
.obras{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.obra{position:relative;border-radius:var(--raio-g);overflow:hidden;background:var(--azul-fundo);margin:0;
  transition:box-shadow 240ms var(--curva)}
.obra:hover{box-shadow:var(--sombra-3)}
.obra img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 240ms var(--curva)}
.obra:hover img{transform:scale(1.035)}
.obra--g{grid-column:span 7;aspect-ratio:4/3}
.obra--m{grid-column:span 5;aspect-ratio:4/3}
.obra--p{grid-column:span 4;aspect-ratio:4/3}
@media(max-width:860px){.obra--g,.obra--m,.obra--p{grid-column:span 12}}
.obra figcaption{position:absolute;inset:auto 0 0 0;padding:22px;color:#fff;
  background:linear-gradient(transparent,rgba(10,32,48,.86) 62%)}
.obra figcaption b{display:block;font:500 1.1rem var(--display);letter-spacing:-.015em}
.obra figcaption span{display:block;font:.78rem var(--mono);color:#A9C3D2;margin-top:4px}
.obra__dados{display:flex;gap:20px;margin-top:12px}
.obra__dados div dt{font:.62rem var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#8FB0C6}
.obra__dados div dd{margin:3px 0 0;font:500 1rem var(--mono);color:var(--verde)}

/* ---------- quem faz ---------- */
.quem{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,68px);align-items:start}
@media(max-width:900px){.quem{grid-template-columns:1fr}}
.quem__foto{border-radius:var(--raio-g);overflow:hidden;background:var(--papel-3);position:relative}
.quem__foto img{width:100%;display:block}
.quem p{font-size:1.04rem;line-height:1.72;color:var(--tinta-media)}
.quem p b{color:var(--azul-fundo)}
.cred{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;margin-top:26px}
.cred div{background:var(--branco);padding:15px 18px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline}
.cred dt{font-size:.93rem;color:var(--tinta)}
.cred dd{margin:0;font:500 .88rem var(--mono);color:var(--azul);text-align:right;white-space:nowrap}

/* ---------- contato ---------- */
.contato{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,5vw,64px);align-items:start}
@media(max-width:860px){.contato{grid-template-columns:1fr}}
.contato__cx{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);padding:28px}
.contato__cx h3{margin-bottom:10px}
.contato__cx p{font-size:.95rem;color:var(--tinta-media);margin:0 0 20px;line-height:1.6}
.contato__cx p:last-child{margin-bottom:0}

/* ---------- rodapé ---------- */
.pe{background:var(--azul-fundo);color:#8FB0C6;padding:clamp(46px,6vw,76px) 0 34px}
.pe__grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:760px){.pe__grade{grid-template-columns:1fr}}
.pe__marca img{height:64px;margin-bottom:16px}
.pe__grade p{font-size:.9rem;line-height:1.65;margin:0}
.pe h4{font:600 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#A4BCCA;margin-bottom:14px}
.pe ul{list-style:none;margin:0;padding:0}
.pe li{margin-bottom:9px}
.pe a{color:#C7DAE5;text-decoration:none;font-size:.92rem;transition:color 150ms var(--curva)}
.pe a:hover{color:var(--verde)}
.pe__base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px;font-size:.83rem;color:#9BB5C4}