:root {
  --azul: #01243d;
  --azul2: #032b48;
  --laranja: #ff7a00;
  --suave: #dce7ef;
  --linha: rgba(255,255,255,.28);
  --max: 1200px;
  --hero: 68dvh;
  --faixa: 32dvh;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { background: #001a2d; }
body {
  margin: 0;
  overflow: hidden;
  color: #fff;
  background: #001a2d;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

.limite {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}

.pagina {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--hero) var(--faixa);
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,17,30,.13) 0%, rgba(0,17,30,.03) 40%, rgba(0,28,49,.80) 100%),
    linear-gradient(90deg, rgba(0,22,38,.97) 0%, rgba(0,22,38,.82) 29%, rgba(0,22,38,.38) 49%, rgba(0,22,38,.07) 68%, rgba(0,22,38,0) 100%),
    url('../img/subestacao-por-do-sol.webp') center 54% / cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(180deg, rgba(1,36,61,0), rgba(1,36,61,.58) 60%, var(--azul));
  pointer-events: none;
}
.hero-interno { position: relative; z-index: 2; height: 100%; }

.logo {
  position: absolute;
  top: clamp(16px, 2.5dvh, 26px);
  left: 0;
  width: clamp(220px, 31dvh, 292px);
  line-height: 0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.32));
}
.logo img { width: 100%; height: auto; object-fit: contain; }

.menu {
  position: absolute;
  top: clamp(16px, 3dvh, 34px);
  right: 0;
  display: flex;
  gap: clamp(22px, 3.2vw, 48px);
  align-items: center;
}
.menu a {
  position: relative;
  padding: 8px 0 12px;
  text-decoration: none;
  font-size: clamp(.76rem, 1.55dvh, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 2px 7px rgba(0,0,0,.5);
}
.menu a:hover,
.menu a:focus-visible,
.menu a.ativo { color: var(--laranja); }
.menu a.ativo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--laranja);
}

.hero-conteudo {
  position: absolute;
  left: 0;
  top: clamp(190px, 23dvh, 220px);
  width: min(51vw, 620px);
}
h1 {
  margin: 0;
  max-width: 610px;
  font-size: clamp(2.15rem, 5.35dvh, 4.1rem);
  line-height: 1.01;
  letter-spacing: -.045em;
  text-shadow: 0 4px 18px rgba(0,0,0,.38);
}
.traco {
  width: clamp(68px, 6.5vw, 104px);
  height: 4px;
  margin: clamp(13px, 1.9dvh, 21px) 0 clamp(10px, 1.55dvh, 17px);
  background: var(--laranja);
}
.subtitulo {
  margin: 0;
  max-width: 560px;
  font-size: clamp(.98rem, 2.18dvh, 1.48rem);
  line-height: 1.35;
  text-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.dados-rapidos {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.65vw, 22px);
  margin-top: clamp(13px, 2.2dvh, 23px);
  font-size: clamp(.79rem, 1.75dvh, 1.08rem);
}
.dado {
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, .8vw, 11px);
  white-space: nowrap;
  text-underline-offset: 4px;
}
.dado svg {
  width: clamp(19px, 2.5dvh, 27px);
  height: clamp(19px, 2.5dvh, 27px);
  flex: 0 0 auto;
  fill: none;
  stroke: var(--laranja);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.separador {
  width: 1px;
  height: clamp(25px, 4dvh, 35px);
  background: rgba(255,255,255,.38);
}

.faixa {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 82% 15%, rgba(0,76,126,.22), transparent 33%),
    linear-gradient(135deg, var(--azul), var(--azul2));
}
.faixa-interna { padding-block: clamp(12px, 2.1dvh, 24px); }
.painel { width: 100%; }
.faixa-titulo {
  margin: 0 0 clamp(12px, 1.9dvh, 20px);
  color: var(--laranja);
  font-size: clamp(.76rem, 1.5dvh, .95rem);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.faixa-titulo::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 8px;
  background: var(--laranja);
}

.empresa-grade,
.sobre-grade {
  display: grid;
  grid-template-columns: .78fr 1.42fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
.destaque-titulo {
  margin: 0;
  font-size: clamp(1.65rem, 3.8dvh, 2.85rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.texto-bloco {
  padding-left: clamp(26px, 3.8vw, 50px);
  border-left: 1px solid var(--linha);
  font-size: clamp(.82rem, 1.7dvh, 1.08rem);
  line-height: 1.42;
}
.texto-bloco p { margin: 0 0 clamp(8px, 1.3dvh, 14px); }
.texto-bloco p:last-child { margin-bottom: 0; }

.servicos-grade { display: grid; grid-template-columns: 1fr 1fr; }
.servico {
  display: grid;
  grid-template-columns: clamp(50px, 5.5vw, 74px) 1fr;
  gap: clamp(16px, 1.8vw, 24px);
  padding-right: clamp(26px, 3.8vw, 52px);
}
.servico + .servico {
  padding-right: 0;
  padding-left: clamp(26px, 3.8vw, 52px);
  border-left: 1px solid var(--linha);
}
.numero { font-size: clamp(2.15rem, 4.6dvh, 3.55rem); line-height: 1; font-weight: 800; }
.servico h2 { margin: 0 0 9px; font-size: clamp(1.18rem, 2.6dvh, 1.9rem); line-height: 1.08; }
.servico p { margin: 0; color: var(--suave); font-size: clamp(.8rem, 1.58dvh, 1rem); line-height: 1.38; }

.contato-grade { display: grid; grid-template-columns: repeat(3, 1fr); }
.contato-item { padding: 0 clamp(24px, 3.5vw, 50px); }
.contato-item:first-child { padding-left: 0; }
.contato-item:last-child { padding-right: 0; }
.contato-item + .contato-item { border-left: 1px solid var(--linha); }
.contato-item svg {
  width: clamp(27px, 3.7dvh, 36px);
  height: clamp(27px, 3.7dvh, 36px);
  fill: none;
  stroke: var(--laranja);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contato-item h2 { margin: clamp(6px, 1dvh, 11px) 0 3px; font-size: clamp(1.18rem, 2.6dvh, 1.8rem); }
.contato-item p,
.contato-item a { margin: 0; color: var(--suave); font-size: clamp(.79rem, 1.55dvh, 1rem); text-underline-offset: 4px; }

:focus-visible { outline: 3px solid rgba(255,122,0,.55); outline-offset: 4px; }

@media (max-height: 720px) and (min-width: 760px) {
  :root { --hero: 66dvh; --faixa: 34dvh; }
  .logo { width: clamp(205px, 29dvh, 250px); }
  .hero-conteudo { top: clamp(170px, 23dvh, 195px); }
  h1 { font-size: clamp(2rem, 5dvh, 3.15rem); }
  .subtitulo { font-size: clamp(.9rem, 2dvh, 1.18rem); }
  .dados-rapidos { margin-top: 11px; }
  .faixa-interna { padding-block: 10px; }
  .faixa-titulo { margin-bottom: 10px; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .pagina { min-height: 100dvh; height: auto; display: block; overflow: visible; }
  .hero { min-height: 68dvh; }
  .faixa { min-height: 32dvh; }

  .logo {
    top: 16px;
    left: 0;
    width: clamp(165px, 42vw, 230px);
  }

  .menu {
    top: 14px;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    z-index: 3;
  }

  .menu a {
    padding: 5px 0 8px;
    font-size: .76rem;
    line-height: 1;
  }

  .menu a.ativo::after {
    height: 2px;
  }

  .hero-conteudo {
    top: clamp(210px, 31dvh, 250px);
    width: 100%;
  }
}