/* =========================================================
   PROJETO: SUBESTAÇÃO INDUSTRIAL 1,35 MVA
   VK SERVIÇOS DE ENGENHARIA E CONSULTORIA

   PARTE 01
   - Variáveis
   - Reset
   - Estrutura global
   - Cabeçalho
   - Hero
   - Formulário
========================================================= */


/* =========================================================
   01. VARIÁVEIS
========================================================= */

:root {
  --azul-950: #06101c;
  --azul-900: #0b1622;
  --azul-850: #0e2033;
  --azul-800: #102b47;
  --azul-700: #17446f;
  --azul-500: #1675b8;

  --dourado: #d4af37;
  --dourado-hover: #e1c04f;
  --dourado-claro: #f2dc8c;

  --verde: #20a56f;
  --vermelho: #dc4c4c;

  --branco: #ffffff;
  --fundo: #f5f7fa;
  --fundo-claro: #f8fafc;
  --borda: #dfe6ed;

  --texto: #263442;
  --texto-suave: #5d6c7b;

  --sombra-suave:
    0 14px 35px rgba(6, 25, 43, 0.08);

  --sombra-media:
    0 20px 55px rgba(6, 25, 43, 0.14);

  --sombra-forte:
    0 30px 80px rgba(0, 0, 0, 0.28);

  --largura-pagina: 1200px;
  --largura-hero: 1400px;
  --altura-topo: 82px;

  --raio-pequeno: 9px;
  --raio-medio: 16px;
  --raio-grande: 22px;
}


/* =========================================================
   02. RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-topo) + 20px);
}

body {
  min-height: 100vh;
  color: var(--texto);
  background: var(--branco);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body,
input,
textarea,
button {
  font-family: "Segoe UI", Arial, sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

section {
  scroll-margin-top: calc(var(--altura-topo) + 20px);
}


/* =========================================================
   03. ESTRUTURA GLOBAL
========================================================= */

.container {
  width: min(
    var(--largura-pagina),
    calc(100% - 40px)
  );

  margin-inline: auto;
}

.subtitulo-secao {
  display: inline-block;

  margin-bottom: 14px;

  color: var(--dourado);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.titulo-secao-projeto {
  max-width: 880px;

  margin: 0 auto 64px;

  text-align: center;
}

.titulo-secao-projeto h2 {
  margin-bottom: 20px;

  color: var(--azul-900);

  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.16;
}

.titulo-secao-projeto p {
  color: var(--texto-suave);

  font-size: 1.02rem;
}


/* =========================================================
   04. CABEÇALHO
========================================================= */

.topo-projeto {
  position: sticky;
  z-index: 1000;

  top: 0;
  left: 0;

  width: 100%;
  min-height: var(--altura-topo);

  background: rgba(6, 16, 28, 0.97);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 5px 24px rgba(0, 0, 0, 0.24);

  backdrop-filter: blur(12px);
}

.topo-wrapper {
  width: min(
    var(--largura-hero),
    calc(100% - 40px)
  );

  min-height: var(--altura-topo);

  margin-inline: auto;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  gap: 35px;
}


/* LOGO */

.logo-topo {
  width: 175px;
  max-height: 58px;

  object-fit: contain;
}


/* MENU */

.menu-projeto ul {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 26px;
}

.menu-projeto a {
  position: relative;

  color: #edf3f8;

  font-size: 0.89rem;
  font-weight: 600;

  transition:
    color 0.25s ease;
}

.menu-projeto a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 2px;

  background: var(--dourado);

  transition:
    width 0.25s ease;
}

.menu-projeto a:hover {
  color: var(--dourado-claro);
}

.menu-projeto a:hover::after {
  width: 100%;
}


/* BOTÃO VOLTAR */

.btn-voltar-topo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 44px;

  padding: 0 19px;

  color: #111;

  background: var(--dourado);

  border-radius: var(--raio-pequeno);

  font-size: 0.89rem;
  font-weight: 800;

  box-shadow:
    0 10px 25px rgba(212, 175, 55, 0.18);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.btn-voltar-topo:hover {
  background: var(--dourado-hover);

  transform: translateY(-2px);

  box-shadow:
    0 14px 30px rgba(212, 175, 55, 0.27);
}


/* =========================================================
   05. HERO
========================================================= */

.hero-projeto-premium {
  position: relative;

  min-height:
    calc(100vh - var(--altura-topo));

  color: var(--branco);

  background:
    linear-gradient(
      90deg,
      rgba(4, 12, 21, 0.93) 0%,
      rgba(4, 12, 21, 0.83) 48%,
      rgba(4, 12, 21, 0.69) 100%
    ),
    url("../assets/img/subestacao_1_35MVA/IMG_01.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;
}

.hero-projeto-premium::before {
  content: "";

  position: absolute;

  top: -180px;
  left: -160px;

  width: 480px;
  height: 480px;

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.15),
      transparent 67%
    );

  pointer-events: none;
}

.hero-projeto-premium::after {
  content: "";

  position: absolute;

  right: -170px;
  bottom: -200px;

  width: 520px;
  height: 520px;

  background:
    radial-gradient(
      circle,
      rgba(22, 117, 184, 0.24),
      transparent 68%
    );

  pointer-events: none;
}


/* CONTEÚDO DA HERO */

.hero-overlay {
  position: relative;
  z-index: 2;

  width: min(
    var(--largura-hero),
    calc(100% - 40px)
  );

  min-height:
    calc(100vh - var(--altura-topo));

  margin-inline: auto;

  padding: 80px 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(360px, 450px);

  align-items: center;

  gap: 65px;
}


/* TEXTO DA HERO */

.hero-conteudo {
  min-width: 0;
}

.tag-hero {
  display: inline-flex;
  align-items: center;

  margin-bottom: 22px;

  padding: 8px 16px;

  color: #111;

  background: var(--dourado);

  border-radius: 999px;

  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  box-shadow:
    0 10px 28px rgba(212, 175, 55, 0.18);
}

.hero-conteudo h1 {
  max-width: 880px;

  margin-bottom: 27px;

  color: var(--branco);

  font-size:
    clamp(2.8rem, 5vw, 4.8rem);

  line-height: 1.07;
  letter-spacing: -0.03em;
}

.hero-conteudo p {
  max-width: 790px;

  margin-bottom: 18px;

  color: #dfe9f2;

  font-size: 1.08rem;
}


/* DADOS DA HERO */

.hero-dados {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 31px;
}

.hero-dados span {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding: 9px 14px;

  color: #edf5fb;

  background:
    rgba(255, 255, 255, 0.075);

  border:
    1px solid rgba(255, 255, 255, 0.14);

  border-radius: 999px;

  font-size: 0.81rem;
  font-weight: 600;

  backdrop-filter: blur(8px);
}

.hero-dados i {
  color: var(--dourado);
}


/* =========================================================
   06. FORMULÁRIO DA HERO
========================================================= */

.box-cadastro-projeto {
  min-width: 0;

  padding: 35px;

  color: var(--texto);

  background:
    rgba(255, 255, 255, 0.98);

  border:
    1px solid rgba(255, 255, 255, 0.55);

  border-radius: var(--raio-grande);

  box-shadow: var(--sombra-forte);

  backdrop-filter: blur(10px);
}

.box-cadastro-projeto h3 {
  margin-bottom: 24px;

  color: var(--azul-900);

  font-size: 1.5rem;
  line-height: 1.25;
}

.box-cadastro-projeto form {
  display: grid;

  gap: 14px;
}

.box-cadastro-projeto input,
.box-cadastro-projeto textarea {
  width: 100%;

  color: var(--texto);

  background: var(--branco);

  border: 1px solid #d7e0e8;
  border-radius: var(--raio-pequeno);

  outline: none;

  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.box-cadastro-projeto input {
  min-height: 51px;

  padding: 0 15px;
}

.box-cadastro-projeto textarea {
  min-height: 125px;

  padding: 14px 15px;

  resize: vertical;
}

.box-cadastro-projeto input::placeholder,
.box-cadastro-projeto textarea::placeholder {
  color: #8a97a4;
}

.box-cadastro-projeto input:focus,
.box-cadastro-projeto textarea:focus {
  border-color: var(--dourado);

  box-shadow:
    0 0 0 4px rgba(212, 175, 55, 0.13);
}


/* BOTÃO DO FORMULÁRIO */

.box-cadastro-projeto button {
  min-height: 53px;

  padding: 0 20px;

  color: #111;

  background: var(--dourado);

  border: none;
  border-radius: var(--raio-pequeno);

  font-size: 0.95rem;
  font-weight: 800;

  box-shadow:
    0 12px 30px rgba(212, 175, 55, 0.2);

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.box-cadastro-projeto button:hover {
  background: var(--dourado-hover);

  transform: translateY(-2px);

  box-shadow:
    0 16px 34px rgba(212, 175, 55, 0.28);
}


/* MENSAGEM DE ENVIO */

.mensagem-formulario {
  min-height: 22px;

  color: var(--azul-700);

  font-size: 0.84rem;
  font-weight: 700;
}

/* =========================================================
   07. VISÃO GERAL
========================================================= */

.secao-visao-geral {
  padding: 105px 0;

  background: var(--branco);
}

.intro-projeto-premium {
  max-width: 930px;

  margin-inline: auto;

  text-align: center;
}

.intro-projeto-premium h2 {
  margin-bottom: 23px;

  color: var(--azul-900);

  font-size:
    clamp(2rem, 4vw, 3rem);

  line-height: 1.16;
}

.intro-projeto-premium p {
  margin-bottom: 18px;

  color: var(--texto-suave);

  font-size: 1rem;
}


/* =========================================================
   08. CARDS DE RESUMO
========================================================= */

.grid-resumo {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 22px;

  margin-top: 58px;
}

.resumo-item {
  position: relative;

  min-width: 0;

  padding: 29px 22px;

  text-align: center;

  background: var(--branco);

  border:
    1px solid var(--borda);

  border-radius: var(--raio-medio);

  box-shadow: var(--sombra-suave);

  overflow: hidden;

  transition:
    transform 0.27s ease,
    box-shadow 0.27s ease,
    border-color 0.27s ease;
}

.resumo-item::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--dourado),
      var(--dourado-claro)
    );
}

.resumo-item::after {
  content: "";

  position: absolute;

  right: -45px;
  bottom: -45px;

  width: 115px;
  height: 115px;

  background:
    rgba(22, 117, 184, 0.055);

  border-radius: 50%;
}

.resumo-item:hover {
  transform: translateY(-6px);

  border-color:
    rgba(212, 175, 55, 0.55);

  box-shadow: var(--sombra-media);
}

.resumo-item strong,
.resumo-item span {
  position: relative;
  z-index: 2;

  display: block;
}

.resumo-item strong {
  margin-bottom: 9px;

  color: var(--dourado);

  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.resumo-item span {
  color: var(--azul-900);

  font-size: 1.06rem;
  font-weight: 800;
}


/* =========================================================
   09. SEÇÃO DOS TRANSFORMADORES
========================================================= */

.secao-galeria-premium {
  padding: 108px 0;

  background:
    linear-gradient(
      180deg,
      var(--fundo-claro) 0%,
      #f1f5f9 100%
    );
}


/* =========================================================
   10. BLOCOS DO PROJETO
========================================================= */

.bloco-projeto {
  display: grid;
  grid-template-columns: 0.9fr 1.35fr;
  align-items: center;
  gap: 50px;

  max-width: 1280px;
  margin: 0 auto 100px;
}

.bloco-projeto:last-child {
  margin-bottom: 0;
}


/* BLOCO INVERTIDO */

.bloco-reverso .bloco-imagem {
  order: 2;
}

.bloco-reverso .bloco-texto {
  order: 1;
}


/* =========================================================
   11. IMAGENS DOS BLOCOS
========================================================= */

.bloco-imagem {
  width: 100%;
  min-width: 0;
}

.bloco-imagem::before {
  content: "";

  position: absolute;

  top: 18px;
  left: 18px;

  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      135deg,
      rgba(212, 175, 55, 0.18),
      rgba(22, 117, 184, 0.1)
    );

  border-radius: var(--raio-grande);

  z-index: 0;
}

bloco-imagem img {
  display: block;

  width: 100%;
  height: 540px;

  object-fit: cover;
  object-position: center;

  border-radius: 24px;

  box-shadow:
    18px 20px 0 rgba(15, 118, 110, 0.08),
    0 25px 55px rgba(0, 31, 63, 0.16);
}

.bloco-imagem:hover img {
  transform: translateY(-5px);

  box-shadow:
    0 28px 65px rgba(4, 20, 36, 0.18);
}


/* =========================================================
   12. TEXTO DOS BLOCOS
========================================================= */

.bloco-texto {
  min-width: 0;
}

.tag-bloco {
  display: inline-block;

  margin-bottom: 10px;

  color: var(--dourado);

  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bloco-texto h3 {
  margin-bottom: 20px;

  color: var(--azul-900);

  font-size:
    clamp(1.8rem, 3vw, 2.35rem);

  line-height: 1.16;
}

.bloco-texto p {
  margin-bottom: 17px;

  color: var(--texto-suave);

  font-size: 0.98rem;
}


/* =========================================================
   13. LISTAS DOS BLOCOS
========================================================= */

.lista-destaques-projeto {
  display: grid;

  gap: 11px;

  margin: 24px 0;
}

.lista-destaques-projeto li {
  position: relative;

  padding-left: 27px;

  color: var(--azul-800);

  font-size: 0.95rem;
  font-weight: 650;
}

.lista-destaques-projeto li::before {
  content: "\f00c";

  position: absolute;

  top: 2px;
  left: 0;

  color: var(--verde);

  font-family:
    "Font Awesome 6 Free";

  font-size: 0.84rem;
  font-weight: 900;
}


/* =========================================================
   14. FRASE DE DESTAQUE
========================================================= */

.frase-impacto-projeto {
  position: relative;

  margin-top: 25px;

  padding: 20px 21px;

  color: var(--branco) !important;

  background:
    linear-gradient(
      135deg,
      var(--azul-900),
      var(--azul-800)
    );

  border-left:
    4px solid var(--dourado);

  border-radius:
    0 var(--raio-pequeno)
    var(--raio-pequeno) 0;

  box-shadow:
    0 12px 28px
    rgba(6, 25, 43, 0.12);

  font-style: italic;
}

.frase-impacto-projeto::before {
  content: "\f10d";

  position: absolute;

  top: 13px;
  right: 17px;

  color:
    rgba(255, 255, 255, 0.11);

  font-family:
    "Font Awesome 6 Free";

  font-size: 2rem;
  font-weight: 900;
}


/* =========================================================
   15. IDENTIFICAÇÃO VISUAL POR TRANSFORMADOR
========================================================= */

/* PRIMEIRO BLOCO: VISÃO GERAL */

.bloco-projeto:nth-of-type(1)
.bloco-texto h3::before {
  content: "01";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 43px;
  height: 43px;

  margin-right: 12px;

  color: #111;

  background: var(--dourado);

  border-radius: 10px;

  font-size: 0.86rem;
  font-weight: 900;

  vertical-align: middle;
}


/* SEGUNDO BLOCO: 750 KVA */

.bloco-projeto:nth-of-type(2)
.bloco-texto h3::before {
  content: "750";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 48px;
  height: 43px;

  margin-right: 12px;
  padding: 0 8px;

  color: var(--branco);

  background: var(--azul-700);

  border-radius: 10px;

  font-size: 0.76rem;
  font-weight: 900;

  vertical-align: middle;
}


/* TERCEIRO BLOCO: 300 KVA ADMINISTRATIVO */

.bloco-projeto:nth-of-type(3)
.bloco-texto h3::before {
  content: "300";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 48px;
  height: 43px;

  margin-right: 12px;
  padding: 0 8px;

  color: #111;

  background: var(--dourado-claro);

  border-radius: 10px;

  font-size: 0.76rem;
  font-weight: 900;

  vertical-align: middle;
}


/* QUARTO BLOCO: 300 KVA CLIMATIZAÇÃO */

.bloco-projeto:nth-of-type(4)
.bloco-texto h3::before {
  content: "300";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 48px;
  height: 43px;

  margin-right: 12px;
  padding: 0 8px;

  color: var(--branco);

  background: var(--azul-500);

  border-radius: 10px;

  font-size: 0.76rem;
  font-weight: 900;

  vertical-align: middle;
}


/* =========================================================
   16. AJUSTE PARA TÍTULOS COM MARCADORES
========================================================= */

.bloco-texto h3::before {
  flex-shrink: 0;
}

.bloco-texto h3 {
  display: flex;
  align-items: center;
}

/* =========================================================
   17. SEÇÃO DO ESTUDO DE PROTEÇÃO
========================================================= */

.secao-protecao {
  position: relative;

  padding: 112px 0;

  color: var(--branco);

  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(212, 175, 55, 0.15),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 85%,
      rgba(22, 117, 184, 0.19),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--azul-950) 0%,
      var(--azul-850) 55%,
      var(--azul-800) 100%
    );

  overflow: hidden;
}

.secao-protecao::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212, 175, 55, 0.75),
      transparent
    );
}

.secao-protecao::after {
  content: "";

  position: absolute;

  right: -180px;
  bottom: -220px;

  width: 520px;
  height: 520px;

  border:
    1px solid rgba(255, 255, 255, 0.055);

  border-radius: 50%;

  pointer-events: none;
}

.secao-protecao .container {
  position: relative;
  z-index: 2;
}


/* =========================================================
   18. TÍTULO CLARO
========================================================= */

.titulo-claro h2 {
  color: var(--branco);
}

.titulo-claro p {
  color: #d6e1eb;
}

.titulo-claro .subtitulo-secao {
  color: var(--dourado-claro);
}


/* =========================================================
   19. GRID DAS FUNÇÕES ANSI
========================================================= */

.grid-funcoes-protecao {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 22px;
}


/* =========================================================
   20. CARDS DAS FUNÇÕES
========================================================= */

.card-funcao-protecao {
  position: relative;

  min-width: 0;
  min-height: 318px;

  padding: 31px 26px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.085),
      rgba(255, 255, 255, 0.035)
    );

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius: var(--raio-grande);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.14);

  overflow: hidden;

  backdrop-filter: blur(8px);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.card-funcao-protecao::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--dourado),
      var(--dourado-claro)
    );
}

.card-funcao-protecao::after {
  content: "";

  position: absolute;

  right: -50px;
  bottom: -55px;

  width: 145px;
  height: 145px;

  background:
    rgba(255, 255, 255, 0.035);

  border-radius: 50%;
}

.card-funcao-protecao:hover {
  transform: translateY(-8px);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.05)
    );

  border-color:
    rgba(212, 175, 55, 0.48);

  box-shadow:
    0 25px 58px rgba(0, 0, 0, 0.22);
}


/* ÍCONE */

.card-funcao-protecao > i {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  margin-bottom: 24px;

  color: var(--azul-950);

  background:
    linear-gradient(
      145deg,
      var(--dourado-claro),
      var(--dourado)
    );

  border-radius: 14px;

  box-shadow:
    0 12px 30px rgba(212, 175, 55, 0.18);

  font-size: 1.25rem;
}


/* CÓDIGO ANSI */

.codigo-ansi {
  position: absolute;
  z-index: 1;

  top: 14px;
  right: 18px;

  color:
    rgba(255, 255, 255, 0.11);

  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.07em;
}


/* TEXTO DO CARD */

.card-funcao-protecao h3 {
  position: relative;
  z-index: 2;

  margin-bottom: 14px;

  color: var(--branco);

  font-size: 1.18rem;
  line-height: 1.3;
}

.card-funcao-protecao p {
  position: relative;
  z-index: 2;

  color: #cbd7e2;

  font-size: 0.91rem;
}


/* =========================================================
   21. IDENTIDADE VISUAL DE CADA FUNÇÃO
========================================================= */

/* FUNÇÃO 50 */

.card-funcao-protecao:nth-child(1)::before {
  background:
    linear-gradient(
      90deg,
      #ffb347,
      #ff8c42
    );
}

.card-funcao-protecao:nth-child(1) > i {
  background:
    linear-gradient(
      145deg,
      #ffd29a,
      #ff9f43
    );
}


/* FUNÇÃO 51 */

.card-funcao-protecao:nth-child(2)::before {
  background:
    linear-gradient(
      90deg,
      #5ec8ff,
      #1675b8
    );
}

.card-funcao-protecao:nth-child(2) > i {
  color: var(--branco);

  background:
    linear-gradient(
      145deg,
      #5ec8ff,
      var(--azul-500)
    );
}


/* FUNÇÃO 47 */

.card-funcao-protecao:nth-child(3)::before {
  background:
    linear-gradient(
      90deg,
      #66d9a8,
      #20a56f
    );
}

.card-funcao-protecao:nth-child(3) > i {
  color: var(--branco);

  background:
    linear-gradient(
      145deg,
      #66d9a8,
      var(--verde)
    );
}


/* FUNÇÃO 59 */

.card-funcao-protecao:nth-child(4)::before {
  background:
    linear-gradient(
      90deg,
      #d0a7ff,
      #7c4dff
    );
}

.card-funcao-protecao:nth-child(4) > i {
  color: var(--branco);

  background:
    linear-gradient(
      145deg,
      #bd95ff,
      #6f42db
    );
}


/* =========================================================
   22. DETALHES DO ESTUDO
========================================================= */

.protecao-detalhes {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 22px;

  margin-top: 58px;
}

.protecao-detalhes > div {
  position: relative;

  min-width: 0;

  padding: 30px 27px;

  background:
    rgba(255, 255, 255, 0.055);

  border:
    1px solid rgba(255, 255, 255, 0.1);

  border-radius: var(--raio-medio);

  overflow: hidden;

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

.protecao-detalhes > div::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background: var(--dourado);
}

.protecao-detalhes > div:hover {
  transform: translateY(-5px);

  background:
    rgba(255, 255, 255, 0.075);

  border-color:
    rgba(212, 175, 55, 0.35);
}

.protecao-detalhes span {
  display: inline-block;

  margin-bottom: 8px;

  color: var(--dourado-claro);

  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.protecao-detalhes h3 {
  margin-bottom: 13px;

  color: var(--branco);

  font-size: 1.2rem;
  line-height: 1.25;
}

.protecao-detalhes p {
  color: #cbd7e2;

  font-size: 0.9rem;
}


/* =========================================================
   23. DESTAQUE PARA FASE E NEUTRO
========================================================= */

.protecao-detalhes > div:first-child {
  background:
    linear-gradient(
      145deg,
      rgba(212, 175, 55, 0.1),
      rgba(255, 255, 255, 0.045)
    );
}

.protecao-detalhes > div:first-child::after {
  content: "50/51";

  position: absolute;

  right: 18px;
  bottom: 10px;

  color:
    rgba(255, 255, 255, 0.055);

  font-size: 3.3rem;
  font-weight: 900;
  line-height: 1;
}


/* =========================================================
   24. DESTAQUE PARA CONCESSIONÁRIA
========================================================= */

.protecao-detalhes > div:nth-child(2)::after {
  content: "\f1ad";

  position: absolute;

  right: 20px;
  bottom: 14px;

  color:
    rgba(255, 255, 255, 0.055);

  font-family:
    "Font Awesome 6 Free";

  font-size: 3rem;
  font-weight: 900;
}


/* =========================================================
   25. DESTAQUE PARA SELETIVIDADE
========================================================= */

.protecao-detalhes > div:nth-child(3)::after {
  content: "\f3ed";

  position: absolute;

  right: 20px;
  bottom: 14px;

  color:
    rgba(255, 255, 255, 0.055);

  font-family:
    "Font Awesome 6 Free";

  font-size: 3rem;
  font-weight: 900;
}


/* =========================================================
   26. BLOCO TÉCNICO COMPLEMENTAR
========================================================= */

.secao-protecao .protecao-detalhes {
  position: relative;
}

.secao-protecao .protecao-detalhes::before {
  content: "Estudo desenvolvido para garantir atuação seletiva, rápida e coordenada das proteções.";

  grid-column: 1 / -1;

  display: block;

  margin-bottom: 2px;
  padding: 17px 20px;

  color: #dce6ef;

  background:
    rgba(255, 255, 255, 0.045);

  border:
    1px dashed rgba(212, 175, 55, 0.35);

  border-radius: var(--raio-pequeno);

  text-align: center;

  font-size: 0.91rem;
  font-style: italic;
}

/* =========================================================
   27. DIFERENCIAIS TÉCNICOS
========================================================= */

.secao-diferenciais {
  padding: 110px 0;

  background: var(--branco);
}

.grid-diferenciais {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 22px;
}

.card-diferencial {
  position: relative;

  min-width: 0;

  padding: 31px 25px;

  background:
    linear-gradient(
      180deg,
      var(--branco) 0%,
      var(--fundo-claro) 100%
    );

  border:
    1px solid var(--borda);

  border-radius: var(--raio-grande);

  box-shadow: var(--sombra-suave);

  overflow: hidden;

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.card-diferencial::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--azul-500),
      var(--dourado)
    );
}

.card-diferencial::after {
  content: "";

  position: absolute;

  right: -45px;
  bottom: -45px;

  width: 130px;
  height: 130px;

  background:
    rgba(22, 117, 184, 0.055);

  border-radius: 50%;
}

.card-diferencial:hover {
  transform: translateY(-7px);

  border-color:
    rgba(212, 175, 55, 0.48);

  box-shadow: var(--sombra-media);
}

.card-diferencial i {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  margin-bottom: 22px;

  color: var(--branco);

  background:
    linear-gradient(
      145deg,
      var(--azul-700),
      var(--azul-500)
    );

  border-radius: 14px;

  box-shadow:
    0 12px 28px rgba(22, 117, 184, 0.22);

  font-size: 1.22rem;
}

.card-diferencial h3 {
  position: relative;
  z-index: 2;

  margin-bottom: 13px;

  color: var(--azul-900);

  font-size: 1.14rem;
  line-height: 1.28;
}

.card-diferencial p {
  position: relative;
  z-index: 2;

  color: var(--texto-suave);

  font-size: 0.91rem;
}


/* =========================================================
   28. METODOLOGIA
========================================================= */

.secao-metodologia {
  position: relative;

  padding: 110px 0;

  background:
    linear-gradient(
      180deg,
      var(--fundo-claro) 0%,
      #edf3f8 100%
    );

  overflow: hidden;
}

.secao-metodologia::before {
  content: "";

  position: absolute;

  top: -170px;
  right: -140px;

  width: 400px;
  height: 400px;

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.11),
      transparent 68%
    );
}

.timeline-metodologia {
  position: relative;

  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 18px;
}

.timeline-metodologia::before {
  content: "";

  position: absolute;

  top: 36px;
  left: 9%;

  width: 82%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--dourado),
      var(--azul-500),
      var(--dourado)
    );

  opacity: 0.55;
}

.etapa-metodologia {
  position: relative;
  z-index: 2;

  min-width: 0;

  padding: 0 12px;

  text-align: center;
}

.numero-etapa {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 72px;
  height: 72px;

  margin-bottom: 22px;

  color: #111;

  background:
    linear-gradient(
      145deg,
      var(--dourado-claro),
      var(--dourado)
    );

  border:
    7px solid var(--fundo-claro);

  border-radius: 50%;

  box-shadow:
    0 12px 30px rgba(6, 25, 43, 0.14);

  font-size: 1.05rem;
  font-weight: 900;
}

.etapa-metodologia h3 {
  margin-bottom: 11px;

  color: var(--azul-900);

  font-size: 1.05rem;
  line-height: 1.3;
}

.etapa-metodologia p {
  color: var(--texto-suave);

  font-size: 0.86rem;
}


/* =========================================================
   29. CTA FINAL
========================================================= */

.cta-projeto {
  position: relative;

  padding: 105px 0;

  color: var(--branco);

  background:
    linear-gradient(
      105deg,
      rgba(4, 12, 21, 0.95),
      rgba(10, 32, 54, 0.89)
    ),
    url("../assets/img/subestacao_1_35MVA/IMG_04.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;
}

.cta-projeto::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--dourado),
      transparent
    );
}

.cta-projeto::after {
  content: "";

  position: absolute;

  right: -180px;
  bottom: -190px;

  width: 500px;
  height: 500px;

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.15),
      transparent 68%
    );
}

.cta-projeto .container {
  position: relative;
  z-index: 2;
}

.cta-conteudo {
  max-width: 850px;

  margin-inline: auto;

  text-align: center;
}

.cta-conteudo span {
  display: inline-block;

  margin-bottom: 15px;

  color: var(--dourado-claro);

  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cta-conteudo h2 {
  margin-bottom: 21px;

  color: var(--branco);

  font-size:
    clamp(2rem, 4vw, 3.2rem);

  line-height: 1.14;
}

.cta-conteudo p {
  max-width: 720px;

  margin:
    0 auto 30px;

  color: #dce6ef;

  font-size: 1rem;
}

.cta-botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 14px;
}

.btn-cta-principal,
.btn-cta-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 52px;

  padding: 0 24px;

  border-radius: var(--raio-pequeno);

  font-size: 0.93rem;
  font-weight: 800;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.btn-cta-principal {
  color: #111;

  background: var(--dourado);

  box-shadow:
    0 14px 32px rgba(212, 175, 55, 0.22);
}

.btn-cta-principal:hover {
  background: var(--dourado-hover);

  transform: translateY(-3px);

  box-shadow:
    0 18px 40px rgba(212, 175, 55, 0.3);
}

.btn-cta-secundario {
  color: var(--branco);

  background:
    rgba(255, 255, 255, 0.075);

  border:
    1px solid rgba(255, 255, 255, 0.26);

  backdrop-filter: blur(8px);
}

.btn-cta-secundario:hover {
  background:
    rgba(255, 255, 255, 0.13);

  border-color:
    rgba(212, 175, 55, 0.65);

  transform: translateY(-3px);
}


/* =========================================================
   30. RODAPÉ
========================================================= */

.rodape-projeto {
  padding: 27px 20px;

  color: #bdc9d4;

  background: var(--azul-950);

  border-top:
    1px solid rgba(255, 255, 255, 0.075);

  text-align: center;

  font-size: 0.85rem;
}

.rodape-projeto strong {
  color: var(--dourado-claro);
}


/* =========================================================
   31. BOTÃO FLUTUANTE DO WHATSAPP
========================================================= */

.whatsapp-fixo {
  position: fixed;
  z-index: 1100;

  right: 22px;
  bottom: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  color: var(--branco);

  background: #25d366;

  border:
    4px solid rgba(255, 255, 255, 0.95);

  border-radius: 50%;

  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.24);

  font-size: 1.65rem;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.whatsapp-fixo:hover {
  transform:
    translateY(-4px)
    scale(1.04);

  box-shadow:
    0 19px 42px rgba(0, 0, 0, 0.3);
}


/* =========================================================
   32. ANIMAÇÕES
========================================================= */

@keyframes entradaSuave {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-conteudo,
.box-cadastro-projeto {
  animation:
    entradaSuave 0.75s ease both;
}

.box-cadastro-projeto {
  animation-delay: 0.12s;
}


/* =========================================================
   33. RESPONSIVIDADE — ATÉ 1100PX
========================================================= */

@media (max-width: 1100px) {

  .topo-wrapper {
    gap: 22px;
  }

  .menu-projeto ul {
    gap: 17px;
  }

  .menu-projeto a {
    font-size: 0.82rem;
  }

  .logo-topo {
    width: 150px;
  }

  .hero-overlay {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(330px, 390px);

    gap: 40px;
  }

  .grid-resumo,
  .grid-funcoes-protecao,
  .grid-diferenciais {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .timeline-metodologia {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    row-gap: 45px;
  }

  .timeline-metodologia::before {
    display: none;
  }
}


/* =========================================================
   34. RESPONSIVIDADE — ATÉ 900PX
========================================================= */

@media (max-width: 900px) {

  :root {
    --altura-topo: 72px;
  }

  .topo-wrapper {
    display: flex;
    justify-content: space-between;

    min-height: var(--altura-topo);
  }

  .menu-projeto {
    display: none;
  }

  .logo-topo {
    width: 148px;
  }

  .btn-voltar-topo {
    min-width: 44px;

    padding: 0 14px;
  }

  .hero-projeto-premium,
  .hero-overlay {
    min-height: auto;
  }

  .hero-overlay {
    grid-template-columns: 1fr;

    padding: 70px 0;

    gap: 45px;
  }

  .hero-conteudo {
    text-align: center;
  }

  .hero-conteudo h1,
  .hero-conteudo p {
    margin-inline: auto;
  }

  .hero-dados {
    justify-content: center;
  }

  .box-cadastro-projeto {
    width: min(100%, 620px);

    margin-inline: auto;
  }

  .bloco-projeto {
    grid-template-columns: 1fr;

    gap: 34px;

    margin-bottom: 85px;
  }

  .bloco-reverso .bloco-imagem,
  .bloco-reverso .bloco-texto {
    order: initial;
  }

  .bloco-imagem {
    max-width: 760px;

    margin-inline: auto;
  }

  .bloco-imagem img {
    height: 420px;
  }

  .bloco-texto {
    max-width: 760px;

    margin-inline: auto;
  }

  .protecao-detalhes {
    grid-template-columns: 1fr;
  }

  .timeline-metodologia {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   35. RESPONSIVIDADE — ATÉ 700PX
========================================================= */

@media (max-width: 700px) {


    .slide-protecao img {
    height: 400px;
    padding: 10px;
    }

    .carrossel-controle {
    width: 41px;
    height: 41px;
    }

    .carrossel-anterior {
    left: 9px;
    }

    .carrossel-proximo {
    right: 9px;
    }

    .slide-protecao figcaption {
    right: 10px;
    bottom: 10px;
    left: 10px;

    padding: 12px 14px;
    }

    .slide-protecao figcaption span {
    display: none;
    }

  .container,
  .topo-wrapper,
  .hero-overlay {
    width: min(
      100% - 28px,
      var(--largura-pagina)
    );
  }

  .secao-visao-geral,
  .secao-galeria-premium,
  .secao-protecao,
  .secao-diferenciais,
  .secao-metodologia,
  .cta-projeto {
    padding:
      78px 0;
  }

  .titulo-secao-projeto {
    margin-bottom: 45px;
  }

  .grid-resumo,
  .grid-funcoes-protecao,
  .grid-diferenciais,
  .timeline-metodologia {
    grid-template-columns: 1fr;
  }

  .hero-conteudo h1 {
    font-size:
      clamp(2.35rem, 11vw, 3.4rem);
  }

  .hero-conteudo p {
    font-size: 1rem;
  }

  .hero-dados {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-dados span {
    justify-content: center;

    text-align: center;
  }

  .box-cadastro-projeto {
    padding: 27px 21px;
  }

  .bloco-imagem::before {
    top: 11px;
    left: 11px;
  }

  .bloco-imagem img {
    height: 330px;
  }

  .bloco-texto h3 {
    align-items: flex-start;

    font-size: 1.72rem;
  }

  .card-funcao-protecao {
    min-height: auto;
  }

  .numero-etapa {
    width: 66px;
    height: 66px;
  }

  .cta-botoes {
    flex-direction: column;
  }

  .btn-cta-principal,
  .btn-cta-secundario {
    width: min(100%, 360px);
  }

  .whatsapp-fixo {
    right: 15px;
    bottom: 15px;

    width: 54px;
    height: 54px;
  }
}


/* =========================================================
   36. RESPONSIVIDADE — ATÉ 480PX
========================================================= */

@media (max-width: 480px) {

    .slide-protecao img {
    height: 330px;
    }

    .carrossel-controle {
    top: 44%;

    width: 38px;
    height: 38px;
    }

  .topo-wrapper {
    width: calc(100% - 22px);
  }

  .logo-topo {
    width: 133px;
  }

  .btn-voltar-topo {
    width: 42px;
    min-width: 42px;
    height: 42px;

    padding: 0;
  }

  .btn-voltar-topo span {
    display: none;
  }

  .hero-overlay {
    width: calc(100% - 24px);

    padding: 57px 0;
  }

  .tag-hero {
    font-size: 0.68rem;

    text-align: center;
  }

  .hero-conteudo h1 {
    font-size: 2.28rem;
  }

  .hero-conteudo p {
    font-size: 0.95rem;
  }

  .box-cadastro-projeto h3 {
    font-size: 1.3rem;
  }

  .resumo-item,
  .card-diferencial,
  .card-funcao-protecao,
  .protecao-detalhes > div {
    padding:
      26px 21px;
  }

  .bloco-imagem img {
    height: 280px;
  }

  .bloco-texto h3 {
    display: block;

    font-size: 1.57rem;
  }

  .bloco-texto h3::before {
    margin:
      0 0 13px;

    display: flex;
  }

  .codigo-ansi {
    font-size: 3.3rem;
  }

  .cta-conteudo h2 {
    font-size: 2rem;
  }
}


/* =========================================================
   37. ACESSIBILIDADE E REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   38. IMPRESSÃO
========================================================= */

@media print {

  .topo-projeto,
  .box-cadastro-projeto,
  .cta-projeto,
  .whatsapp-fixo {
    display: none !important;
  }

  body {
    color: #000;

    background: #fff;
  }

  .hero-projeto-premium {
    min-height: auto;

    color: #000;

    background: #fff;
  }

  .hero-overlay {
    min-height: auto;

    display: block;

    padding: 30px 0;
  }

  .hero-conteudo h1,
  .hero-conteudo p {
    color: #000;
  }

  .secao-protecao {
    color: #000;

    background: #fff;
  }

  .titulo-claro h2,
  .titulo-claro p,
  .card-funcao-protecao h3,
  .card-funcao-protecao p,
  .protecao-detalhes h3,
  .protecao-detalhes p {
    color: #000;
  }

  .card-funcao-protecao,
  .protecao-detalhes > div {
    background: #fff;

    border: 1px solid #bbb;

    box-shadow: none;
  }
}

/* =========================================================
   CARROSSEL — CURVAS DO ESTUDO DE PROTEÇÃO
========================================================= */

.carrossel-protecao {
  position: relative;
  min-width: 0;
}

.carrossel-viewport {
  position: relative;

  width: 100%;

  background: var(--branco);

  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);

  box-shadow: var(--sombra-media);

  overflow: hidden;
}

.carrossel-trilho {
  display: flex;

  width: 100%;

  transition: transform 0.55s ease;
}

.slide-protecao {
  position: relative;

  flex: 0 0 100%;

  min-width: 100%;
  margin: 0;

  background: var(--branco);
}

.slide-protecao img {
  width: 100%;
  height: 490px;

  padding: 14px;

  object-fit: contain;
  object-position: center;

  background: #ffffff;
}

.slide-protecao figcaption {
  position: absolute;

  right: 18px;
  bottom: 18px;
  left: 18px;

  padding: 15px 18px;

  color: var(--branco);

  background: rgba(6, 16, 28, 0.88);

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;

  backdrop-filter: blur(10px);
}

.slide-protecao figcaption strong,
.slide-protecao figcaption span {
  display: block;
}

.slide-protecao figcaption strong {
  margin-bottom: 3px;

  color: var(--dourado-claro);

  font-size: 0.95rem;
}

.slide-protecao figcaption span {
  color: #e1e9f0;

  font-size: 0.82rem;
  line-height: 1.45;
}


/* CONTROLES */

.carrossel-controle {
  position: absolute;
  z-index: 5;

  top: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  color: var(--branco);

  background: rgba(6, 16, 28, 0.84);

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

  transform: translateY(-50%);

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.carrossel-controle:hover {
  color: #111;

  background: var(--dourado);

  transform:
    translateY(-50%)
    scale(1.06);
}

.carrossel-anterior {
  left: 16px;
}

.carrossel-proximo {
  right: 16px;
}


/* INDICADORES */

.carrossel-indicadores {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-top: 18px;
}

.indicador-protecao {
  width: 10px;
  height: 10px;

  padding: 0;

  background: #bec8d1;

  border: none;
  border-radius: 999px;

  transition:
    width 0.25s ease,
    background 0.25s ease;
}

.indicador-protecao.ativo {
  width: 31px;

  background: var(--dourado);
}