*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* =========================================
   CSS Variables - Fonte Oficial Zait.ag
   ========================================= */

@font-face {
  font-family: "Galano Grotesque";
  src: url("../fonts/GalanoGrotesque-Bold.woff2") format("woff2"), url("../fonts/GalanoGrotesque-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque";
  src: url("../fonts/GalanoGrotesque-Medium.woff2") format("woff2"), url("../fonts/GalanoGrotesque-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque";
  src: url("../fonts/GalanoGrotesque-Regular.woff2") format("woff2"), url("../fonts/GalanoGrotesque-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque";
  src: url("../fonts/GalanoGrotesque-SemiBold.woff2") format("woff2"), url("../fonts/GalanoGrotesque-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galano Grotesque";
  src: url("../fonts/GalanoGrotesque-Light.woff2") format("woff2"), url("../fonts/GalanoGrotesque-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   CSS Variables - Paleta Oficial Zait.ag
   ========================================= */
:root {
  /* Verdes - Cores principais da marca */
  --zait-green-light: #B9CF38;
  --zait-green-medium: #727927;
  --zait-green-dark: #606721;
  --zait-green-accent: #BAD042;
  --zait-green-primary: #727927;
  
  /* Escuros - Backgrounds */
  --zait-dark-light: #2C2C2C;
  --zait-dark-medium: #1A1A1A;
  --zait-dark-deep: #100F0F;
  --zait-bg-dark: #1A1A1A;
  --zait-bg-darker: #0a0808;
  --zait-bg-black: #1e2126;
  
  /* Claros */
  --zait-light-primary: #DFDFDF;
  --zait-light-medium: #ABACAD;
  --zait-light-dark: #676767;
  --zait-bg-light: #f0f2f5;
  --zait-bg-white: #ffffff;
  
  /* Texto */
  --zait-text-light: #ffffff;
  --zait-text-muted: #ABACAD;
  --zait-text-dark: #1A1A1A;
  --zait-text-gray: #676767;
  
  /* Gradientes */
  --zait-gradient-green: linear-gradient(135deg, #B9CF38 0%, #727927 100%);
  --zait-gradient-dark: linear-gradient(180deg, #1A1A1A 0%, #100F0F 100%);
  --zait-gradient-light: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f0f2f5 100%);
  
  /* Transições */
  --zait-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --zait-transition-fast: all 0.2s ease;
  
  /* Sombras */
  --zait-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --zait-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
  --zait-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.2);
  --zait-shadow-green: 0 4px 20px rgba(185, 207, 56, 0.3);
  
  /* Border radius */
  --zait-radius-sm: 8px;
  --zait-radius-md: 12px;
  --zait-radius-lg: 16px;
  --zait-radius-xl: 24px;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Galano Grotesque", sans-serif;
  font-size: 16px;
  color: #1E2126;
  background-color: #ffffff;
  min-height: 100%;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0px;
  padding: 0px;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}

.container {
  margin: 0 auto;
  width: 100%;
  min-width: 320px;
}

@media (min-width: 420px) {
  .container {
    width: 400px;
  }
}

@media (min-width: 520px) {
  .container {
    width: 500px;
  }
}

@media (min-width: 720px) {
  .container {
    width: 700px;
  }
}
@media (min-width: 920px) {
  .container {
    width: 900px;
  }
}
@media (min-width: 1224px) {
  .container {
    width: 1204px;
  }
}

.container:before,
.container:after,
.container-full:before,
.container-full:after,
.break:before,
.break:after {
  display: table;
  content: " ";
}

.container:after,
.container-full:after,
.break:after {
  clear: both;
}

p + p {
  margin-top: 20px;
}

::selection {
  background-color: #7AA752;
  color: #FFF;
}

img {
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container-full {
  width: 100%;
  min-width: 320px;
}

.bg-black-1 {
  background-color: #1e2126;
  color: #fff;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  font-weight: normal;
  text-align: left;
}