/* =========================
   FONTE DO LOGO
========================= */

@font-face {
  font-family: 'Vareimo';
  src: url('/assets/fonts/Varelmo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================
   BASE
========================= */

:root{
  --preto: #000000;
  --preto2: #0b0b0f;
  --preto3: #12121a;
  --branco: #f6f6f6;
  --cinza: #cfcfd6;
  --cinza2: rgba(255,255,255,.72);
  --dourado: #d4af37;
  --dourado2: #b89022;
  --linha: rgba(212,175,55,.28);
  --linha-branca: rgba(255,255,255,.08);
  --vidro: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  --vidro-forte: rgba(0,0,0,.55);
  --sombra: 0 1.125rem 2.8125rem rgba(0,0,0,.45);
  --sombra-forte: 0 1.875rem 5rem rgba(0,0,0,.65);
  --raio: 1.125rem;
  --container: 70rem;
}

*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--branco);
  line-height:1.55;
  background:#000;
  overflow-x:hidden;
}

/* =========================
   FUNDO FULLSCREEN
========================= */

.bg-wallpaper{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:#000;
  background-image:url("/assets/img/fundo.jpeg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.34;
  filter:contrast(1.05) saturate(.95);
}

.bg-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(68.75rem 43.75rem at 50% 15%, rgba(0,0,0,.30), rgba(0,0,0,.74)),
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.82));
}

.bg-glow{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(37.5rem 25rem at 20% 10%, rgba(212,175,55,.06), transparent 60%),
    radial-gradient(43.75rem 31.25rem at 80% 20%, rgba(255,255,255,.03), transparent 60%);
  opacity:.9;
}

.topo,
main,
.hero,
.secao,
.rodape,
.container{
  position:relative;
  z-index:3;
}

/* =========================
   ELEMENTOS GERAIS
========================= */

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

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

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.25rem;
}

.card{
  border-radius:var(--raio);
  border:.0625rem solid var(--linha-branca);
  background:var(--vidro);
  box-shadow:var(--sombra);
  backdrop-filter: blur(.75rem);
}

.bloco{
  padding:1.25rem;
}

.bloco h4{
  margin:0 0 .5rem;
  font-size:1rem;
}

.bloco p{
  margin:0;
  font-size:.8125rem;
  color:var(--cinza2);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4375rem .75rem;
  border-radius:62.4375rem;
  border:.0625rem solid rgba(212,175,55,.30);
  background:rgba(212,175,55,.08);
  font-size:.75rem;
  color:rgba(255,255,255,.92);
}

.tag i{
  width:.4375rem;
  height:.4375rem;
  border-radius:6.1875rem;
  background:var(--dourado);
}

/* =========================
   LOGO / TIPOGRAFIA
========================= */

.logo-text{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:nowrap;
}

.logo-nome{
  font-family:'Vareimo', sans-serif;
  letter-spacing:.375rem;
  text-transform:uppercase;
  font-weight:400;
  font-size:1.125rem;
}

.logo-sub{
  font-family:'Vareimo', sans-serif;
  font-weight:400;
  font-size:.5rem;
  letter-spacing:.09375rem;
  text-transform:uppercase;
  opacity:.75;
  transform:translateY(.125rem);
}

.hero-titulo{
  font-family:'Vareimo', sans-serif !important;
  letter-spacing:.375rem;
  text-transform:uppercase;
  font-weight:400 !important;
  line-height:1.1;
  display:inline-block;
}

/* =========================
   TOPO
========================= */

.topo{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(.625rem);
  border-bottom:.0625rem solid rgba(255,255,255,.06);
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.35);
}

.topo-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.875rem 0;
}

.logo{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
}

.logo-icon{
  height:5rem;
  width:auto;
  border-radius:.625rem;
  filter:drop-shadow(0 0 .625rem rgba(212,175,55,.18));
}

.logo-text{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}

.menu{
  display:flex;
  gap:1rem;
  align-items:center;
}

.menu a{
  font-size:.8125rem;
  color:rgba(255,255,255,.78);
  padding:.5625rem .625rem;
  border-radius:.75rem;
  transition:.2s;
}

.menu a:hover{
  color:var(--branco);
  background:rgba(255,255,255,.06);
}

.menu a.ativo{
  border:.0625rem solid var(--linha);
  background:rgba(212,175,55,.08);
}

.topo-acoes{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
}

/* =========================
   BOTÕES
========================= */

.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.625rem;
  padding:.75rem 1.125rem;
  border-radius:.875rem;
  border:.0625rem solid var(--linha);
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
  box-shadow:0 .875rem 2.1875rem rgba(0,0,0,.35);
  transition:.2s;
}

.botao:hover{
  transform:translateY(-.125rem);
  border-color:rgba(212,175,55,.55);
}

.botao-sec{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
}

/* =========================
   HOME
========================= */

.hero{
  padding:6.25rem 0 3.75rem;
}

.home-hero-card{
  max-width:56.25rem;
  margin:0 auto;
  padding:2.5rem 1.875rem;
  text-align:center;
  border-radius:1.5rem;
  border:.0625rem solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(.75rem);
  box-shadow:var(--sombra-forte);
}

.home-hero-card h1{
  margin:0 0 1rem;
  font-size:2.625rem;
}

.home-sub{
  max-width:37.5rem;
  margin:1.25rem auto;
  color:rgba(255,255,255,.78);
  font-size:1.0625rem;
}

.home-sub strong{
  color:var(--dourado);
}

.home-actions{
  margin-top:1.75rem;
  display:flex;
  gap:.875rem;
  justify-content:center;
  flex-wrap:wrap;
}

.home-stats{
  max-width:62.5rem;
  margin:2.5rem auto 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.125rem;
}

.home-stat{
  padding:1.25rem;
}

/* =========================
   SEÇÕES
========================= */

.secao{
  padding:3.75rem 0;
}

.secao-head{
  margin-bottom:1.25rem;
}

.secao-head h2{
  margin:0 0 .375rem;
  font-size:1.875rem;
}

.secao-head p{
  margin:0;
  color:rgba(255,255,255,.72);
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.25rem;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
}

/* =========================
   LISTAS / BLOCOS DE CONTEÚDO
========================= */

.lista-info{
  display:grid;
  gap:1rem;
}

.lista-info .item{
  border:.0625rem solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.32);
  border-radius:1rem;
  padding:1rem 1rem 1.1rem;
  backdrop-filter:blur(.5rem);
}

.lista-info .item small{
  display:block;
  margin:0 0 .5rem;
  color:rgba(255,255,255,.82);
  font-size:1rem;
}

.lista-info .item h3{
  margin:0 0 .625rem;
  font-size:1.75rem;
  line-height:1.05;
}

.lista-info .item p{
  margin:0;
  color:rgba(255,255,255,.74);
}

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

.form{
  display:grid;
  gap:1rem;
}

.linha{
  display:grid;
  gap:.4rem;
}

label{
  font-size:.875rem;
  color:rgba(255,255,255,.88);
}

input,
textarea,
select{
  width:100%;
  padding:.75rem;
  border-radius:.875rem;
  border:.0625rem solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:var(--branco);
  outline:none;
}

textarea{
  min-height:7.5rem;
  resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(212,175,55,.55);
  box-shadow:0 0 0 .25rem rgba(212,175,55,.10);
}

/* =========================
   TABELAS / LINHAS DE CONTEÚDO
========================= */

.tabela-simples{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:1rem;
  border:.0625rem solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.26);
  backdrop-filter:blur(.5rem);
}

.tabela-simples tr + tr{
  border-top:.0625rem solid rgba(255,255,255,.08);
}

.tabela-simples td,
.tabela-simples th{
  padding:1rem 1.125rem;
  vertical-align:top;
  text-align:left;
}

.tabela-simples th{
  color:rgba(255,255,255,.90);
  font-weight:700;
}

.tabela-simples td{
  color:rgba(255,255,255,.76);
}

/* =========================
   RODAPÉ
========================= */

.rodape{
  margin-top:2rem;
  padding:2.25rem 0 2.5rem;
  border-top:.0625rem solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.34)),
    rgba(0,0,0,.22);
  backdrop-filter:blur(.4rem);
}

.rodape .container{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.rodape p{
  margin:0;
  font-size:.95rem;
  color:rgba(255,255,255,.78);
}

.rodape-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.875rem;
}

.rodape-nav a{
  color:rgba(255,255,255,.76);
  font-size:1rem;
  transition:.2s;
  position:relative;
}

.rodape-nav a:hover{
  color:var(--branco);
}

.rodape-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.15rem;
  width:100%;
  height:.0625rem;
  background:rgba(212,175,55,.55);
  transform:scaleX(0);
  transform-origin:left;
  transition:.2s;
}

.rodape-nav a:hover::after{
  transform:scaleX(1);
}

/* =========================
   UTILITÁRIOS
========================= */

.texto-dourado{
  color:var(--dourado);
}

.centralizado{
  text-align:center;
}

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

@media (max-width: 61.25rem){
  .home-stats{
    grid-template-columns:1fr;
  }

  .grid-2,
  .grid-3{
    grid-template-columns:1fr;
  }

  .topo-inner{
    gap:1rem;
  }

  .logo{
    min-width:0;
  }

  .home-hero-card h1{
    font-size:2.25rem;
  }

  .tabela-simples td,
  .tabela-simples th{
    padding:.875rem 1rem;
  }
}

@media (max-width: 35rem){
  .menu{
    display:none;
  }

  .container{
    padding:0 1rem;
  }

  .topo-inner{
    padding:.75rem 0;
  }

  .logo{
    gap:.625rem;
    align-items:center;
  }

  .logo-icon{
    height:4rem;
    border-radius:.5rem;
  }

  .logo-text{
    gap:.25rem;
    margin-left:.35rem;
    flex-wrap:wrap;
  }

  .logo-nome{
    font-size:.9rem;
    letter-spacing:.18rem;
    line-height:1.1;
  }

  .logo-sub{
    font-size:.45rem;
    letter-spacing:.08rem;
    transform:translateY(.0625rem);
  }

  .hero{
    padding:4.5rem 0 3rem;
  }

  .home-hero-card{
    padding:2rem 1.2rem;
    border-radius:1.25rem;
  }

  .home-hero-card h1{
    font-size:2rem;
    line-height:1.05;
    margin:0 0 1rem -0.8rem;
  }

  .hero-titulo{
    letter-spacing:.2rem;
  }

  .tag{
    font-size:.6875rem;
    padding:.375rem .75rem;
  }

  .home-sub{
    font-size:1rem;
    margin:1rem auto;
  }

  .home-actions{
    gap:.75rem;
    margin-top:1.25rem;
  }

  .botao{
    padding:.75rem 1rem;
    font-size:.9375rem;
  }

  .topo-acoes{
    gap:.5rem;
  }

  .topo-acoes .botao{
    padding:.7rem .9rem;
    font-size:.9rem;
  }

  .bloco{
    padding:1rem;
  }

  .bloco h4{
    font-size:.95rem;
  }

  .bloco p{
    font-size:.8rem;
  }

  .secao{
    padding:3rem 0;
  }

  .secao-head{
    margin-bottom:1rem;
  }

  .secao-head h2{
    font-size:1.5rem;
  }

  input,
  textarea,
  select{
    padding:.75rem;
    font-size:1rem;
  }

  textarea{
    min-height:7rem;
  }

  .rodape{
    padding:1.5rem 0 1.8rem;
  }

  .rodape p{
    font-size:.9rem;
  }

  .rodape-nav{
    gap:.75rem;
  }

  .rodape-nav a{
    font-size:.95rem;
  }

  .lista-info .item h3{
    font-size:1.45rem;
  }
}