:root {
  /* Paleta Principal - Modernizada */
  --verde-menta-claro: #d4f1ed;
  --verde-menta-escuro: #38b2ac;
  --azul-eletrico: #2c7a7b;
  --laranja-pastel: #FFB27E;
  --cinza-claro: #f6f8f8;
  --preto-sutil: #1a202c;

  /* Paleta Secundária */
  --azul-cobalto: #2d3748;
  --roxo-claro: #A3A0DE;
  --amarelo-suave: #FFD28C;
  --branco-puro: #FFFFFF;

  /* Override das variáveis do Bootstrap */
  --bs-primary: var(--verde-menta-escuro);
  --bs-secondary: var(--azul-eletrico);
  --bs-success: var(--verde-menta-claro);
  --bs-info: var(--azul-eletrico);
  --bs-warning: var(--amarelo-suave);
  --bs-danger: var(--laranja-pastel);
  --bs-light: var(--cinza-claro);
  --bs-dark: var(--preto-sutil);
  
  /* Cores para textos e backgrounds */
  --body-bg: var(--branco-puro);
  --body-color: var(--preto-sutil);
  --heading-color: var(--azul-cobalto);
  --link-color: var(--verde-menta-escuro);
  --link-hover-color: var(--azul-eletrico);
  --cta-bg: var(--verde-menta-escuro);
  --cta-hover-bg: var(--azul-eletrico);
  --accent-color: var(--laranja-pastel);
  --secondary-accent: var(--roxo-claro);
}

/* Aplicação das cores aos elementos do template */
body {
  background-color: var(--body-bg);
  color: var(--body-color);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

.btn-primary {
  background-color: var(--cta-bg);
  border-color: var(--cta-bg);
}

.btn-primary:hover {
  background-color: var(--cta-hover-bg);
  border-color: var(--cta-hover-bg);
}

.btn-secondary {
  background-color: var(--verde-menta-escuro);
  border-color: var(--verde-menta-escuro);
}

/* Estilo para o header */
.fbs__net-navbar {
  background-color: var(--branco-puro);
}

.fbs__net-navbar.dark {
  background-color: var(--preto-sutil);
}

/* Estilos para os cartões */
.card {
  border-color: var(--cinza-claro);
}

.card-header {
  background-color: var(--verde-menta-claro);
}

/* Estilos específicos para Otto */
.otto-section {
  background-color: var(--verde-menta-claro);
  padding: 3rem 0;
}

.otto-icon {
  background-color: var(--verde-menta-escuro);
  color: var(--branco-puro);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
}

/* Classes de utilidade para cores */
.bg-verde-menta-claro { background-color: var(--verde-menta-claro); }
.bg-verde-menta-escuro { background-color: var(--verde-menta-escuro); }
.bg-azul-eletrico { background-color: var(--azul-eletrico); }
.bg-laranja-pastel { background-color: var(--laranja-pastel); }
.bg-roxo-claro { background-color: var(--roxo-claro); }
.bg-azul-cobalto { background-color: var(--azul-cobalto); }

.text-verde-menta-claro { color: var(--verde-menta-claro); }
.text-verde-menta-escuro { color: var(--verde-menta-escuro); }
.text-azul-eletrico { color: var(--azul-eletrico); }
.text-laranja-pastel { color: var(--laranja-pastel); }
.text-roxo-claro { color: var(--roxo-claro); }
.text-azul-cobalto { color: var(--azul-cobalto); }

/* Cookie Consent Styles */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  z-index: 9999;
  display: none;
}

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.cookie-text {
  flex: 1;
  min-width: 300px;
}

.cookie-text h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--azul-cobalto);
}

.cookie-text p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

.cookie-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Cookie Modal */
.cookie-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.cookie-modal-content {
  background-color: white;
  border-radius: 0.5rem;
  max-width: 600px;
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.cookie-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e9e9e9;
}

.cookie-modal-header h3 {
  margin: 0;
  color: var(--azul-cobalto);
}

.cookie-close {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.cookie-modal-body {
  padding: 1.5rem;
}

.cookie-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.cookie-option h4 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem 0;
}

.cookie-option p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

.cookie-modal-footer {
  padding: 1.5rem;
  border-top: 1px solid #e9e9e9;
  text-align: right;
}

@media (max-width: 768px) {
  .cookie-content, .cookie-actions {
    flex-direction: column;
  }
  
  .cookie-actions {
    width: 100%;
  }
  
  .cookie-actions button {
    width: 100%;
  }
}