:root {
  
  --cor-primaria: #2b607a;
  --cor-secundaria: #3a92af;
  --cor-terciaria: #def2f1;
  --cor-destaque: #171b2a;
  --cor-texto: #222;
  --cor-clara: #ffffff;
  --cor-cinza: #cccccc;
  --cor-erro: #d9534f;


  --font-xs: 0.8rem;
  --font-sm: 1rem;
  --font-md: 1.25rem;
  --font-lg: 1.75rem;
  --font-xl: 2.5rem;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;


  --colunas: repeat(12, 1fr);
}


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

body {
  font-family: "Poppins", Arial, sans-serif;
  color: var(--cor-texto);
  background-color: var(--cor-clara);
  line-height: 1.6;
  padding: var(--space-1) var(--space-3);
}

h1, h2, h3, h4, h5 {
  color: var(--cor-destaque);
  line-height: 1.3;
  
}


a {
  text-decoration: none;
  color: var(--cor-primaria);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--cor-secundaria);
}


.light-bg {
  padding: var(--space-6) var(--space-3);
}

.banner-img img{
  max-width: 100%;
  height: auto;
  display: block;
}

.outras-img {
  max-width: 100%;  
  height: 150%;     
  object-fit: cover; 
  border-radius: 3px; 
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.menu-toggle {
  display: none; 
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--cor-destaque);
}