:root {
  /* Colores base */
  --color-white: #ffffff;
  --color-offwhite: #f8faf8; /* Blanco ligeramente verdoso */
  --color-black: #121212; /* Negro suavizado para mejor contraste */

  /* Paleta verde principal (basada en tus colores) */
  --color-primary: #2d9870; /* Verde principal (más vibrante) */
  --color-primary-dark: #255852; /* Verde oscuro elegante */
  --color-primary-darker: #1a3e3a; /* Para textos o acentos fuertes */
  --color-primary-light: #5cb490; /* Versión clara del primario */
  --color-primary-lighter: #e0f0e9; /* Verde muy claro para fondos sutiles */

  /* Verdes adicionales para profundidad */
  --color-secondary-green: #3aaf85; /* Verde más brillante para acentos */
  --color-muted-green: #7d9e8f; /* Verde apagado para elementos secundarios */

  /* Escala de grises con tono verde (armonizada con la paleta) */
  --color-gray-100: #f2f7f5; /* Gris muy claro con toque verde */
  --color-gray-200: #e3eae7;
  --color-gray-300: #d1dad6;
  --color-gray-400: #b8c5bf;
  --color-gray-500: #94a59e;
  --color-gray-600: #6b7f77;
  --color-gray-700: #4d5e58;
  --color-gray-800: #2f3b37;
  --color-gray-900: #1a2320;

  /* Colores semánticos (armonizados con la paleta verde) */
  --color-success: #2a9d8f; /* Verde azulado */
  --color-warning: #e9c46a; /* Amarillo terroso */
  --color-error: #e76f51; /* Coral suave */
  --color-info: #3a86ff; /* Azul que complementa los verdes */

  /* Textos */
  --color-text-primary: var(--color-gray-900); /* Casi negro con tono verde */
  --color-text-secondary: var(--color-gray-600); /* Gris verdoso medio */
  --color-text-light: var(--color-offwhite); /* Para fondos oscuros */
  --color-link: var(--color-primary); /* Verde principal */
  --color-link-hover: var(--color-primary-dark); /* Verde oscuro */

  /* Fondos */
  --bg-primary: var(--color-offwhite); /* Fondo principal blanco verdoso */
  --bg-secondary: var(--color-primary-lighter); /* Verde super claro */
  --bg-dark: var(--color-primary-dark); /* Verde oscuro para contraste */
  --bg-card: var(--color-white); /* Tarjetas/bloques blancos puros */

  /* Bordes */
  --border-color: var(--color-gray-300); /* Borde sutil gris verdoso */
  --border-radius: 0.375rem; /* Radio ligeramente mayor */

  /* Sombras sutiles con tono verde */
  --shadow-sm: 0 1px 3px rgba(26, 35, 32, 0.08);
  --shadow-md: 0 4px 6px rgba(37, 88, 82, 0.1);
  --shadow-lg: 0 10px 15px rgba(45, 152, 112, 0.1);
}

/* === Clases de fondo === */
.bg-custom-primary {
  background-color: var(--color-primary);
}
.bg-custom-primary-dark {
  background-color: var(--color-primary-dark);
}
.bg-custom-primary-light {
  background-color: var(--color-primary-light);
}
.bg-custom-offwhite {
  background-color: var(--color-offwhite);
}
.bg-custom-lighter {
  background-color: var(--color-primary-lighter);
}

/*& === Clases de texto === &*/
.text-custom-primary {
  color: var(--color-primary);
}
.text-custom-dark {
  color: var(--color-primary-dark);
}
.text-custom-darker {
  color: var(--color-primary-darker);
}
.text-custom-light {
  color: var(--color-text-light);
}
.text-custom-muted {
  color: var(--color-muted-green);
}

/*& === Clases de bordes === &*/
.border-custom-primary {
  border-color: var(--color-primary);
}
.border-custom-light {
  border-color: var(--color-gray-300);
}
.border-custom-dark {
  border-color: var(--color-primary-dark);
}

/*& === Clases semánticas === &*/
.bg-custom-success {
  background-color: var(--color-success);
}
.bg-custom-error {
  background-color: var(--color-error);
}
.bg-custom-warning {
  background-color: var(--color-warning);
}

.text-custom-success {
  color: var(--color-success);
}
.text-custom-error {
  color: var(--color-error);
}
.text-custom-warning {
  color: var(--color-warning);
}

/*& === Clases utilitarias adicionales === &*/
.hover\:bg-custom-primary-dark:hover {
  background-color: var(--color-primary-dark);
}
.hover\:text-custom-primary-dark:hover {
  color: var(--color-primary-dark);
}

.focus\:ring-custom-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 152, 112, 0.3); /* Verde primary con opacidad */
}

/*& === Ejemplo de componente preestilizado === &*/
.btn-custom-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.5rem 1.25rem;
  border-radius: var(--border-radius);
  transition: background-color 0.2s;
  text-decoration: none;
}
.btn-custom-primary:hover {
  background-color: var(--color-primary-dark);
}

/*? Estilos que venian con la plantilla */
.hero-image {
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

.tab-content > .tab-pane {
  padding: 20px;
}

.form-check-input {
  transform: scale(1.2);
  margin-right: 10px;
}
.form-check-label {
  font-size: 1.1rem;
  cursor: pointer;
}
/*? Fin de los estilos que venian con la plantilla */

.section-scroll {
  scroll-margin-top: 95px;
}

.filter-invert {
  filter: brightness(0);
}

.property-badge {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.3s ease;
}

.card {
  border-radius: 12px !important;
}

.card-img-container {
  height: 240px;
  overflow: hidden;
}

/* Ajusta el tamaño de las banderas si es necesario */
.fis {
  font-size: 1.2em;
  vertical-align: middle;
}

/* Estilo para el dropdown de idiomas */
#languageDropdown:hover {
  opacity: 0.8;
}

/* Mejorar visibilidad de los botones */
.buttons-container {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ddd;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #555;
  transition: background-color 0.3s ease;
}

.step-circle.active {
  background-color: #007bff;
  color: white;
}