/* === VARIÁVEIS & MOTOR DE TEMA === */
:root {
  --c-black: #000000;
  --c-white: #ffffff;
  --c-red: red;
  --c-cyan: #1ab7d2;
  --c-gray-light: #d9d9d9;
  --c-gray-dark: #2d2d2d;
  --c-gray-mid: #464646;

  /* === TEMA PADRÃO (DARK) === */
  --cor-fundo: var(--c-black);
  --cor-texto: var(--c-white);
  --cor-destaque: var(--c-red);
  
  /* Header e Navegação */
  --bg-header-scrolled: rgba(0, 0, 0, 0.95);
  --nav-link-color: rgb(119, 119, 119);
  --nav-link-hover: var(--cor-texto);

  /* Formulários e Cards */
  --bg-input: var(--c-gray-dark);
  --color-input-text: var(--c-white);
  --border-input: 1px solid transparent;
  --border-box: 2px solid gray;
  --shadow-suave: rgba(255, 0, 0, 0.212);
  --font-padrao: 'Poppins', Arial, sans-serif;
  --transition-padrao: 0.2s ease-in-out;
}

/* === TEMA CLARO (LIGHT MODE) === */
body.light-mode {
  --cor-fundo: var(--c-gray-light);
  --cor-texto: var(--c-black);
  --cor-destaque: var(--c-cyan);

  --bg-header-scrolled: var(--c-gray-light);
  --nav-link-color: var(--c-gray-mid);
  --nav-link-hover: var(--c-black);

  --bg-input: #e1e1e1;
  --color-input-text: var(--c-black);
  --border-input: 1px solid #ccc;
  --border-box: 2px solid var(--c-black);

  --shadow-suave: rgba(26, 183, 210, 0.21);
}

/* === RESET & BASE === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-padrao);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  transition: background-color 0.3s ease, color 0.3s ease; 
}

.interface {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.flex {
  display: flex;
}

/* === UTILITÁRIOS === */
a.btn-contato,
a.btn-voltar-site,
.btn-contato button,
form .btn-enviar button,
button {
  padding: 10px 40px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--cor-destaque); 
  color: #000000; 
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: var(--transition-padrao);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  line-height: normal;
}

a.btn-contato:hover,
a.btn-voltar-site:hover,
.btn-contato button:hover,
form .btn-enviar button:hover,
button:hover {
  box-shadow: 0px 0px 15px var(--cor-destaque);
  transform: scale(1.05);
  color: #000000; 
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-padrao);
}

h2.titulo {
  font-size: 37px;
  text-align: center;
  color: var(--cor-texto);
}

h2.titulo span {
  color: var(--cor-destaque);
}

/* === ANIMAÇÕES === */
@keyframes flutuar {
  0% { transform: translateY(0); }
  100% { transform: translateY(15px); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Fade Classes */
.fade-in, .fade-text, .fade-img {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.active, .fade-text.active, .fade-img.active {
  opacity: 1;
  transform: translateY(0);
}

.fade-header-effect {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(.51,1.18,.77,1.15);
}
.fade-header-effect.visible {
  opacity: 1;
  transform: translateY(0);
}