/* =========================================
   COREGOV - CSS GLOBAL PADRONIZADO
========================================= */

/* VARIÁVEIS */

:root{
  --verde:#00FF9F;
  --verde-hover:#00e68f;
  --azul-escuro:#0B1220;
  --azul-medio:#111A2A;
  --branco:#FFFFFF;
  --cinza:#CCCCCC;
}

/* RESET GLOBAL */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

/* BODY */

body{
  background:var(--azul-escuro);
  color:var(--branco);
  padding-top:90px;
}

/* =========================================
   HEADER
========================================= */

header{
  position:fixed;
  top:0;
  width:100%;
  padding:15px 8%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(11,18,32,0.90);
  backdrop-filter:blur(10px);
  z-index:1000;
  transition:0.3s;
}

header.scrolled{
  background:rgba(11,18,32,0.98);
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* BRAND */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-icon{
  height:42px;
  width:auto;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-name{
  font-size:18px;
  font-weight:700;
  color:var(--verde);
}

.brand-sub{
  font-size:11px;
  color:var(--cinza);
}

/* NAV */

nav{
  display:flex;
  align-items:center;
  gap:10px;
}

nav a{
  color:var(--cinza);
  text-decoration:none;
  font-size:14px;
  transition:0.3s;
}

nav a:hover,
nav a.active{
  color:var(--verde);
}

/* =========================================
   BOTÃO PADRÃO
========================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  padding:12px 24px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  transition:0.3s;
  border:none;
  cursor:pointer;
}

.btn:hover{
  transform:translateY(-2px);
  opacity:0.95;
}

/* =========================================
   HERO DE SERVIÇOS
========================================= */

.servico-hero{
  position:relative;
  width:100%;
  height:320px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
}

.servico-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.60);
}

.servico-hero-overlay{
  position:relative;
  z-index:2;
  text-align:center;
  padding:20px;
}

.servico-hero-overlay h1{
  color:var(--verde);
  font-size:48px;
  margin-bottom:15px;
  font-weight:700;
}

.servico-hero-overlay p{
  color:var(--branco);
  font-size:18px;
  max-width:700px;
  margin:auto;
}

/* =========================================
   SEÇÕES PADRÃO
========================================= */

.section,
.servico-section,
.recrutamento-section{
  max-width:1200px;
  margin:50px auto;
  padding:0 20px;
}

.section h1,
.servico-section h1{
  font-size:48px;
  margin-bottom:20px;
}

.section h1 span{
  color:var(--verde);
}

.section h2,
.servico-section h2,
.recrutamento-section h2{
  color:var(--verde);
  margin-bottom:20px;
  font-size:36px;
}

.section p,
.section li,
.servico-section p,
.recrutamento-section p{
  color:var(--cinza);
  line-height:1.8;
  font-size:17px;
}

.section ul{
  padding-left:20px;
  margin:20px 0;
}

/* =========================================
   GRID DOS CARDS
========================================= */

.cards-grid,
.cards-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
  margin-top:40px;
}

/* CARD PADRÃO */

.card{
  background:var(--azul-medio);
  padding:30px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 8px 25px rgba(0,0,0,0.35);
  transition:0.3s;
}

.card:hover{
  transform:translateY(-6px);
  border-color:var(--verde);
}

.card h3{
  color:var(--verde);
  margin-bottom:15px;
  font-size:24px;
  font-weight:700;
}

.card p{
  color:var(--cinza);
  line-height:1.7;
  margin-bottom:25px;
  font-size:15px;
}

/* =========================================
   FORMULÁRIOS
========================================= */

.form-container{
  max-width:700px;
  margin:60px auto;
  background:var(--azul-medio);
  padding:35px;
  border-radius:16px;
  box-shadow:0 8px 25px rgba(0,0,0,0.4);
}

.form-container h2{
  text-align:center;
  color:var(--verde);
  margin-bottom:25px;
}

.form-container input,
.form-container select,
.form-container textarea{
  width:100%;
  padding:14px;
  margin-bottom:16px;
  border:none;
  border-radius:10px;
  background:#1b2740;
  color:#fff;
  font-size:15px;
}

.form-container textarea{
  resize:vertical;
}

.form-container button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:0.3s;
}

.form-container button:hover{
  opacity:0.95;
  transform:translateY(-2px);
}

/* =========================================
   TABELAS
========================================= */

.tabela-candidatos{
  width:100%;
  border-collapse:collapse;
  margin-top:30px;
}

.tabela-candidatos th,
.tabela-candidatos td{
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-align:left;
}

.tabela-candidatos th{
  color:var(--verde);
  background:#09111f;
}

.tabela-candidatos tr:hover{
  background:rgba(255,255,255,0.03);
}

/* =========================================
   LINKS RELACIONADOS
========================================= */

.related{
  max-width:1200px;
  margin:auto;
  padding:40px 20px 80px;
}

.related h2{
  margin-bottom:25px;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

.related-grid a{
  background:var(--azul-medio);
  padding:18px;
  border-radius:12px;
  color:var(--cinza);
  text-decoration:none;
  transition:0.3s;
}

.related-grid a:hover{
  border:1px solid var(--verde);
  color:var(--verde);
}

/* =========================================
   RESPONSIVO
========================================= */

@media(max-width:900px){

  header{
    flex-direction:column;
    gap:20px;
    padding:20px;
  }

  nav{
    flex-wrap:wrap;
    justify-content:center;
  }

  .servico-hero-overlay h1{
    font-size:36px;
  }

  .section h1,
  .servico-section h1{
    font-size:34px;
  }

  .section h2,
  .servico-section h2,
  .recrutamento-section h2{
    font-size:28px;
  }

  .card{
    padding:24px;
  }

}