:root {
  /* -----------------------------------------------------------
     1. PALETA DE CORES (O "Verde MR" como Protagonista)
  ----------------------------------------------------------- */
  /* A cor exata do texto "MR" */
  --color-mr-green: #6FBFB2; 
  --color-mr-green-dark: #58998E;  /* Versão para Hover/Active */
  --color-mr-green-light: #E8F4F2; /* Versão para backgrounds suaves */

  /* Cores de Suporte (do ícone X) */
  --color-x-lime: #9ACB3C;
  --color-x-indigo: #2F4B8F;
  
  /* Neutros Estruturais */
  --color-navy-dark: #141E3C;   /* Texto principal e Headers */
  --color-gray-soft: #F8FAFB;   /* Fundo da página */
  --color-white: #FFFFFF;

  /* -----------------------------------------------------------
     2. GRADIENTES (Identidade do Logo)
  ----------------------------------------------------------- */
  /* Gradiente que transita entre as duas cores do "X" */
  --brand-gradient: linear-gradient(135deg, var(--color-x-lime) 0%, var(--color-mr-green) 50%, var(--color-x-indigo) 100%);

  /* -----------------------------------------------------------
     3. BOOTSTRAP 5 / SEMÂNTICA (Ajustado para o Verde MR)
  ----------------------------------------------------------- */
  /* Agora o Primary é o Verde do MR */
  --bs-primary: var(--color-mr-green);
  --bs-primary-rgb: 111, 191, 178;

  /* O Azul Índigo passa a ser o Secondary (mais sóbrio) */
  --bs-secondary: var(--color-x-indigo);
  --bs-secondary-rgb: 47, 75, 143;

  /* O Lima passa a ser o Accent/Success (para destaque) */
  --bs-success: var(--color-x-lime);

  /* Texto e Links */
  --bs-body-color: var(--color-navy-dark);
  --bs-body-bg: var(--color-gray-soft);
  --bs-link-color: var(--color-mr-green-dark); /* Um pouco mais escuro para ler melhor */
}

/* -----------------------------------------------------------
   ESTILOS DE COMPONENTES CUSTOMIZADOS
----------------------------------------------------------- */

/* Botão Principal com a cor do MR */
.btn-primary {
  background-color: var(--color-mr-green);
  border-color: var(--color-mr-green);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-mr-green-dark);
  border-color: var(--color-mr-green-dark);
  transform: translateY(-1px);
}

/* Cards ou Secções que usam o gradiente do logo como detalhe */
.border-gradient {
  border-image: var(--brand-gradient) 1;
  border-width: 3px;
  border-style: solid;
}

/* Navbar ou Header usando o Marinho do logo para contraste */
.navbar-brand-xmr {
  background-color: var(--color-navy-dark);
  color: var(--color-white);
}

/* ================================
   HERO SECTION COM IMAGEM DE FUNDO
   ================================ */
.hero-section {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background-image: url("/mrhealth/assets/img/banner.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Overlay com branding e contraste real */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.85) 25%,
    rgba(112,198,182,0.25) 55%,
    rgba(21,32,61,0.45) 80%,
    rgba(21,32,61,0.65) 100%
  );
  z-index: 1;
}

/* Conteúdo sempre acima */
.hero-section .container {
  position: relative;
  z-index: 2;
}