@font-face {
  font-family: "Simple Notes";
  src: url("../../fonts/SimpleNotes.otf") format("truetype");
}

@font-face {
  font-family: "Super Bouncer";
  src: url("../../fonts/SuperBouncer.ttf") format("truetype");
}

:root {
  /* Cores principais */
  --azul: #00A0D3;
  --vermelho: #D9233D;
  --amarelo: #FFC506;
  --laranja: #EF5B1C;
  --verde: #80DA2F;
  --roxo: #9E62E6;

  /* Tons escuros */
  --azul-escuro: #023D51;
  --vermelho-escuro: #5E0F1A;
  --amarelo-escuro: #806303;
  --laranja-escuro: #752A0D;
  --verde-escuro: #375E14;
  --roxo-escuro: #492C6B;

  /* Neutros */
  --branco: #FFFFFF;
  --fundo: #ffffff;
  --preto: #000000;
  --texto: #2a2a2a;
  
  /* Fontes */
  --fonte-titulo: "Super Bouncer", sans-serif;
  --fonte-texto: "Baloo 2", sans-serif;
  --fonte-extra: "Simple Notes", sans-serif;

  
  /* Outros */
  --nav-h: 90px;
  --size-titulo: clamp(2rem, 4.9vw, 3.8rem);
}

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

html,body{
  margin:0; 
  padding:0; 
}

html{
  scroll-behavior:smooth;
}


body{
  font-family: var(--fonte-texto);
  background: var(--fundo);
  color: var(--texto);
  line-height:1.5;
  overflow-x:hidden;
}


.test{
  
  min-height:150vh;
}

h1,h2,h3 {
  font-weight:400;
  letter-spacing:0.5px;
  font-family: var(--fonte-titulo);
  line-height: 1.15;
}

h1{
  
  text-shadow: 0 4px 0 rgba(2,61,81,.25);
}

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

ul{
  list-style:none;
}


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

/* BOTOES FIXOS NA TELA (WHATSAPP E VOLTAR AO INICIO) */
.btn-fixo-container {
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 14px;
z-index: 9999;
}

.btn-fixo {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
cursor: pointer;
border: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
}

.btn-fixo:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* WhatsApp */
.btn-whatsapp {
background-color: #25D366;
}

.btn-whatsapp svg {
width: 30px;
height: 30px;
fill: #ffffff;
}

/* Voltar ao topo */
.btn-topo {
background-color: #ffffff;
border: 1px solid #e0e0e0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
}

.btn-topo.visivel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.btn-topo svg {
width: 22px;
height: 22px;
fill: var(--laranja);
}

@media (max-width: 480px) {
    .btn-fixo-container {
        right: 14px;
        bottom: 14px;
    }
    .btn-fixo {
        width: 50px;
        height: 50px;
    }
}


/* VITRINE DE BOTÕES */

  /* <button class="btn azul">Home</button>
    <button class="btn vermelho">Sobre nós</button>
    <button class="btn verde">Projetos</button>
    <button class="btn roxo">Contato</button>
    <button class="btn laranja">Apoie-nos</button>
    <button class="btn amarelo">Saiba mais</button> */

 
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: 1rem;
  color: var(--branco);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  border-bottom: 4px solid rgba(0,0,0,0.18);
  transition: transform .18s ease, box-shadow .18s ease, border-bottom-width .18s ease;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
.btn:active{ transform: translateY(0); border-bottom-width: 0; }
 
.btn.azul{ background: var(--azul); }
.btn.vermelho{ background: var(--vermelho); }
.btn.verde{ background: var(--verde-escuro); }
.btn.roxo{ background: var(--roxo); }
.btn.laranja{ background: var(--laranja); border-bottom-color: var(--laranja-escuro); }
.btn.amarelo{ background: var(--amarelo); color: var(--amarelo-escuro); }
.btn.outline { background: transparent; border: 2px solid var(--branco); }


/* reveal animation */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.show { opacity: 1; transform: translateY(0); }


/* DIVISOR NUVEM */

.divisor-nuvem{
  width: 100%;
  position: absolute;
  bottom: 0;
}



/* NUMEROS */

.stats{
    max-width:1100px;
    margin:0 auto;
    padding:70px 28px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px 8px;
  }
 
  .stat{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
 
  .stat .icon{
    width:52px;
    height:52px;
    margin-bottom:10px;
  }
 
  .stat .inner{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
 
  .num{
    font-family:var(--fonte-titulo);
    font-weight:700;
    font-size:clamp(1.9rem,2.4vw,2.6rem);
    line-height:1;
    letter-spacing:.01em;
  }
 
  .label{
    font-family:var(--fonte-texto);
    font-size:14px;
    font-weight:500;
    color:var(--texto);
    margin-top:6px;
    line-height:1.3;
    max-width:150px;
  }
 
  @media (max-width:900px){
    .stats{
      grid-template-columns:1fr 1fr;
      gap:34px 12px;
      padding:50px 20px;
    }
  }
  @media (max-width:520px){
    .stats{ grid-template-columns:1fr; }
  }